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

For:each
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