Salesforce | Iterate list of records in LWC (Lightning Web Component)

Salesforce | Iterate list in LWC

In LWC, we have two ways to display the list of records in our web component

1. for:each:

• for:item=”currentItem”: This is used to access the current item.
• for:index=”index”: used for accessing the current item’s index.
• key={uniqueId}: used to assign a unique ID to each item. Regardless of which directive (for:each or Iterator) you use, we must use a key as it helps to re-render only the item that changed in the list.

1. Iterator: We can use this to apply special behavior to the first or last item in a list.

• First — A boolean value which indicates if the current item is the first item in the list.
• Last — A boolean value which indicates if the current item is the last item in the list.

Below is the code of various files of “IteratorDemo” LWC:

• IteratorDemo.html:

• IteratorDemo.js:
  import { LightningElement } from 'lwc';
export default class IteratorDemo extends LightningElement {
contacts = [
{
Id: "1",
Name: "Demo",
Email: "Demo@gmail.com"
},
{
Id: 2,
Name: "Demo2",
Email: "Demo2@gmail.com"
},
{
Id: 3,
Name: "Demo3",
Email: "Demo3@gmail.com"
}
] }
• IteratorDemo.css:
  .list-first{
border-top: 1px solid black;
padding-top: 5px;
}
.list-last{
border-bottom: 1px solid black;
padding-bottom: 5px;
}

Output of “IteratorDemo” LWC:

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Originally published at https://blog.webnersolutions.com on June 11, 2021.