Looping and Iteration

Looping and Iteration help to render the list. Looping and Iteration is a structure that repeats a sequence of directions until a specific condition is met.

In Lightning web component Looping can be achieved in two way

  1. For:each
  2. Iterator

for:each={array}

For:each directive is used to iterate the array and render it. You must use a key directive to assign a unique ID to each item on the list.

To access the current item in for each we need to use the for:item=”currentItem” and to access the current item’s index, use for:index=”index”.

Let’s create the apex method

Accountcontroller.js
public class accountclass {
   @AuraEnabled (cacheable=true)
   public static List accountclass() {
       List acc=[select id,name from Account limit 5];
       return acc;
   }
}


Create the component

Salesforcedriller.html
<template>
   <lightning-card title="Account List using Apex Wire To Function in Salesfroce Driller" icon-name="custom:custom63">
       <div class="slds-m-around_medium">
              <template for:each={accounts} for:item="acc">
                  <p key={acc.Id}>{acc.Name}</p>
               </template>
       </div>
   </lightning-card>
</template>

Salesforcedriller.js
import { LightningElement, wire,track } from 'lwc';
import accountclass from '@salesforce/apex/accountclass.accountclass';
export default class AccountListLWC extends LightningElement {
   @track accounts;
   @track error;
   @wire(accountclass)
   wiredAccounts({ error, data }) {
       if (data) {
           this.accounts = data;
       } else if (error) {
           console.log(error);
           this.error = error;
       }
   }
}


Output

iterator:iteratorName={array}

This works the same as for:each directive but We Use this directive to apply special behavior to the first or last item in an array and render a list in your component.

Access these properties on the iteratorName:

  • value—The value of the item in the list.
  • syntax is iteratorName.value.propertyName.
  • index—The index(0,1,2..) of the item in the list.
  • first—check whether the item is the first item on the list.
  • last—check whether the item is the last item on the list.

Create the component

Salesforcedriller.html
<template>
   <lightning-card title="Salesforce Driller" icon-name="custom:custom14">
       <ul class="slds-m-around_medium">
           <template iterator:it={salesforcedriller}>
               <li key={it.value.Id}>
                   <div if:true={it.first} class="list-first">
                       This is First Item Name: {it.value.Name}
                   </div>
                   {it.value.Name}
                   <div if:true={it.last} class="list-last">
                       This is Last Item Name: {it.value.Name}
                   </div>
               </li>
           </template>
       </ul>
   </lightning-card>
</template>


salesforcedriller.js
import { LightningElement, track } from 'lwc';

export default class ConditionalSalesforcedriller extends LightningElement {
   salesforcedriller = [
       {
           Id: 1,
           Name: 'salesforcedriller-I'
       },
       {
           Id: 2,
           Name: 'salesforcedriller-II'
       },
       {
           Id: 3,
           Name: 'salesforcedriller-III'
       },
   ];
}

Output

Subscribe Now