Usage of iterator directive in lightning web components
Let’s discuss here how to use the lightning web component HTML template iterator directive to iterate through the collection of data. The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. As the name suggests, the attribute directives are altering the properties of an element to which they are attached and the structural ones are changing. Directives are special HTML attributes, like if:true and for:each, that gives you more power to manipulate the DOM in markup.HTML templates also render data to the DOM. Please refer to this link for the development environment setup
The iterator directive to iterate over an array. Add iterator directive to a nested <template> tag that encloses the HTML elements you want to repeat. To apply a special behavior to the first or last item in a list, use the iterator directive, iterator:iteratorName={array}. Use the iterator directive on a template tag.
Use iteratorName to access these properties:
value—The value of the item in the list. Use this property to access the properties of the array. For example,iteratorName.value.propertyName.index—The index of the item in the list.first—A boolean value indicating whether this item is the first item in the list.last—A boolean value indicating whether this item is the last item in the list.
1: Create an Apex Class
Create an apex class using the following SFDX command
|
1 |
sfdx force:apex:class:create -n AccountController -d force-app/main/default/apex |
here below is the complete code
2. Create Lightning web component
create a lightning web component using the following SFDX command.
|
1 |
sfdx force:lightning:component:create --type lwc -n foriterator -d force-app/main/default/lwc |
In this component, we are using iterator directive to iterate the array and nested array
Use this below foriterator.html markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<template> <lightning-card title="Simple iterator Example" icon-name="custom:custom3"> <div class="slds-m-around_medium"> <ul class="slds-m-around_medium"> <template if:true={accounts.data}> <template iterator:it={accounts.data}> <li key={it.value.Id}> {it.value.Name} </li> </template> </template> </ul> </div> </lightning-card> <lightning-card title="Nested Array Example" icon-name="custom:custom3"> <div class="slds-m-around_medium"> <template if:true={accountsInner.data}> <ul> <template iterator:it={accountsInner.data}> <li key={it.value.Id}>{it.value.Name} <ul key={it.value.Id}> <template iterator:it={it.value.Contacts}> <li key={it.value.Id}>{it.value.Name}</li> </template> </ul> </li> </template> </ul> </template> </div> </lightning-card> </template> |
Use this below foriterator.js code
|
1 2 3 4 5 6 7 8 9 10 11 |
import { LightningElement, wire } from 'lwc'; import getAccountList from '@salesforce/apex/AccountController.getAccountList'; import getInnerData from '@salesforce/apex/AccountController.getInnerData'; export default class Foriterator extends LightningElement { @wire(getAccountList) accounts; @wire(getInnerData) accountsInner; } |
Use this below foriterator.css markup
|
1 2 3 4 5 6 7 |
li { list-style-type: circle; } li li { list-style-type: square; } |
Use this below foriterator.js-meta.xml markup
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
3. Push changes to scratch org.
Push changes to scratch using this command and add this component to record page using lighting app builder
|
1 |
sfdx force:source:push |
After adding the lightning web component to record page using the app builder. you can able to see the data as shown below and one section contains the simple collection and another section contains the nested collections.
Understand the code
The below code is used to iterate the array of data. This example iterates over an array called iterator:it={accounts.data} and assign a key to the first element in the nested template using the key={it.value.Id}
|
1 2 3 4 5 6 7 |
<template if:true={accounts.data}> <template iterator:it={accounts.data}> <li key={it.value.Id}> {it.value.Name} </li> </template> </template> |
The below code is used to iterate the nested array of data. This example iterates over an array called iterator:it={accountsInner.data} and assign a key to the first element in the nested template using the key={it.value.Id} and in the inner template, we are taking the reference from the outer template using terator:it={it.value.Contacts} and iterating the array.
|
1 2 3 4 5 6 7 8 9 |
<template iterator:it={accountsInner.data}> <li key={it.value.Id}>{it.value.Name} <ul key={it.value.Id}> <template iterator:it={it.value.Contacts}> <li key={it.value.Id}>{it.value.Name}</li> </template> </ul> </li> </template> |
