Welcome to SFDC Share Point

Salesforce Blogs

Iteration in LWC

Updated: Dec 31, 2020

To iterate over the list in LWC there are two directives available.

for:each template directive To render a list of items, use for:each directive or the iterator directive to iterate over an array. Add the directive to a nested The iterator directive has first and last properties that let you apply special behaviors to the first and last items in an array. Regardless of which directive you use, you must use a key directive to assign a unique ID to each item. When a list changes, the framework uses the key to rerender only the item that changed. The key in the template is used for performance optimization and isn’t reflected in the DOM at run time. When using the for:each directive, use for:item=”currentItem” to access the current item.

<!-- helloForEach.html -->
<template>
    <lightning-card title="HelloForEach" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={contacts} for:item="contact">
                <li key={contact.Id}>
                    {contact.Name}, {contact.Title}
                </li>
            </template>
        </ul>
    </lightning-card>
</template>


 

Ref: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_lists

// helloForEach.js
import { LightningElement } from 'lwc';

export default class HelloForEach extends LightningElement {
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}

//Ref: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_lists
 
List of names and titles.

2. iterator

To apply 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.

Checkout the sample as below:

<template>
    <lightning-card title="HelloIterator" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template iterator:it={contacts}>
                <li key={it.value.Id}>
                    <div if:true={it.first} class="list-first"></div>
                    {it.value.Name}, {it.value.Title}
                    <div if:true={it.last} class="list-last"></div>
                </li>
            </template>
        </ul>
    </lightning-card>
</template>
 
.list-first {
    border-top: 1px solid black;
    padding-top: 5px;
}

.list-last {
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}
 
List of names and titles with the first name and title rendered in bold.

Ref: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_lists

#LWC

Recent Posts

See All

Current User Id in Salesforce

While working on salesforce we come across the need of fetching user id. Here is the way to get user id in Apex, Lightning Component, LWC and Formula Field. Formula Field $User.Id Apex UserInfo.getUse