• How To Iterate Array/List In Lightning Web Components (LWC)

    Published By: Venu Gutta
    Published on: Friday, 10 July 2020
    A- A+

    How To Iterate List Of Items In LWC

    Iterate array of elments in LWC html template

    LWC iteration: In this post we will see how to use iteration in Lightning Web Components template. Like aura:iteration in Aura, we have "for:each" in lwc. By using "for:each" we can iterate set of elements/items in lwc html template. We can access element by using for:item and we can get index value with for:index .

     <template for:each={itemList} for:item="item" for:index="index">  

    Iteration in lwc html Example: Iterate List of Accounts.

    Create apex class: IterationInLwcController
     public with sharing class IterationInLwcController {  
       @AuraEnabled(cacheable = true)  
       public static List<Account> fetchAccounts(){  
         return [SELECT Id,Name,Phone,Type,Industry,Rating,Website FROM Account LIMIT 100];  

    Create New Lightning Web Component: iterationInLwc

    If you getting list from wired property then, we need o use list.data to "for:each". Because wired property contains data and error. 
       <lightning-card title="Iteration In LWC">  
         <div class="slds-p-around_small">  
           <template for:each={accounts.data} for:item="account" for:index="index">  
             <div class="slds-p-left_small" key={account.Id}>  


     import { LightningElement, wire } from 'lwc';  
     import fetchAccounts from '@salesforce/apex/IterationInLwcController.fetchAccounts';  
     export default class IterationInLwc extends LightningElement {  
       @wire(fetchAccounts) accounts;  


  • 1 comment to ''How To Iterate Array/List In Lightning Web Components (LWC)"