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
