List Iteration in Salesforce Lightning Web Components

List iteration is one of those things you do all the time in Lightning Web Components (LWC), so it’s worth getting really comfortable with it.

In Salesforce Lightning Web Components, there are many scenarios where we need to iterate over or render a list of the same set of records with different data, such as different names, emails, or products.

For example, you want to show a list of contacts. Each contact should appear in a box with the same style, but with a different name and email.

In Salesforce Lightning Web Components, we have template looping to iterate over a list of the same set of records with different data.

We have two types of directives, for each and iterator, by which we can achieve template looping.

In this tutorial, I will explain how to perform list iteration in Salesforce Lightning Web Components using the directives for: each and Iterator.

What “list iteration” Means in Salesforce LWC

In Lighting Web Components, whenever we use for:each or Iterator, we need to use the key directive on the element being iterated over. The key assigns each item a unique ID, and without it, we cannot iterate.

In simple terms, list iteration in LWC means: “I have an array of data in my JavaScript file, and I want to loop over it in the HTML to show each item.”

When a list changes, the framework uses the key to re-render only the changed item. This is used for performance optimization and isn’t reflected in the DOM at run time.

Let’s see how we can use the for: each and iterator directives for list iteration in Salesforce Lightning Web Components.

Typical real‑world uses:

Showing a list of Contacts or Opportunities in a custom component
Rendering dynamic rows (cart items, tasks, line items)
Adding separators, headers, or totals based on the position of items

In LWC templates, you mainly have two ways to iterate over a list:

for:each directive – simple, clean, works for most cases
iterator directive – slightly more advanced, gives you extra info like first/last/index

Both rely on a nested <template> tag and a key for each item, so LWC can efficiently re‑render only the changed rows.

Iterate List in Salesforce LWC With for:each

When using the for:each directive to iterate over a list, we can access the current item by using for:item=”currentItem”.

To assign a key to the first element in the nested template, use the key={uniqueId} directive.

Now, follow the steps below to create the Lightning Web Component in which we will perform list iteration using the for:each directive.

Create the Lightning web component, and enter the code below in the JS file. In this, we will manually define an array of contact records that we will iterate over using for:each.

You can also fetch the data dynamically by calling the Apex class in the Lightning web Component.

import { LightningElement } from 'lwc';
 
export default class LwcForEach extends LightningElement {
    contacts = [
        {
            Id: 101,
            Name: 'Ema Evans',
            Title: 'Vice President',
        },
        {
            Id: 102,
            Name: 'Adam Philips',
            Title: 'Cheief Technical Officer',
        },
        {
            Id: 103,
            Name: 'Brian Wells',
            Title: 'CEO',
        },
    ];
}

After this, we will define the iteration in the HTML using the code below.

<template>
    <lightning-card title="ForEachLoopLWC" icon-name="standard:contact">
        <ul class="slds-m-around_medium">
            <template if:true={contacts}>
                <template for:each={contacts} for:item="contact">
                    <li key={contact.Id}>
                        {contact.Name}, {contact.Title}
                    </li>
                </template>
            </template>
        </ul>
    </lightning-card>
</template>

In the code above, the component checks whether the contacts array contains data using if:true={contacts}. Then, it enters the loop defined by for:each={contacts} and assigns each item to a variable named contact using for:item=”contact”.

Inside the loop, each contact’s name and title are displayed within an <li> element, and a unique key is provided using key={contact.Id} to help the framework efficiently track DOM changes.

This iteration allows the component to display a list of contacts within a Lightning card.

Now, make the component visible to the Lightning page using the code below in the meta.xml file.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

After this, deploy the Lightning web component to the page to view the list of records.

Iterate list in Salesforce Lightning Web Components

The Lightning Web Component shows the list of records we entered in the JS file.

This way, we can iterate over a list of records in the Lightning Web Component using the for:each directive.

Iterate List in Salesforce LLWC Using Iterator

When using the iterator directive, the syntax and structure are a bit different compared to for:each. The iterator directive requires a for:iterator attribute to define the list to iterate over.

We will also need to define the key directive for the unique ID, just as we did with for:each.

The iterator directive allows us to access both the item and its index. This can be particularly helpful when you want to display the list along with its position, or when you want to apply specific styles or logic based on the iteration index.

Here’s an example of how we can use the iterator directive to iterate over a list of employees and display each employee’s name, ID, and company in the list using the index.

Now, let’s create the Lightning Web Component, which we will iterate over the list using the for:iterator attribute.

Create the Lightning Web Component and label it as loopingIterator. After this, enter the code below in the loopingIterator.js file.

In the JS file, we have created an array of employees with their id, company, and name values.

import { LightningElement } from "lwc";
export default class TemplateLoopingIterator extends LightningElement {
  empList = [
    {
      id: 1,
      company: "Salesforce",
      name: "Mark Benioff"
    },
    {
      id: 2,
      company: "Samsung",
      name: "James Davidson"
    },
    {
      id: 3,
      company: "Delloite",
      name: "Andy Young"
    },
    {
      id: 4,
      company: "Infosys",
      name: "Kylie jamson"
    },
    {
      id: 5,
      company: "Capgemini",
      name: "Daniel Paul"
    }
  ];
}

After this, enter the code below in the loopingIterator.html file to iterate over the array defined in the JS file to render it as a list.

<template>
    <lightning-card title="Iterator loop for list in LWC" icon-name="custom:custom14">
      <ul>
        <div>
          <template iterator:emp={empList}>
            <div key={emp.value.id}>
              <a href="#" if:true={emp.first}>
                <strong>List of companies and their employees : </strong>
              </a>
              <a href="#">
                <strong>{emp.value.company} : </strong>{emp.value.name}
              </a>
              <a href="#" if:true={emp.last}></a>
            </div>
          </template>
        </div>
      </ul>
    </lightning-card>
</template>

This HTML template displays a list of employees inside a Lightning card using the iterator directive. The iterator:emp={empList} loop provides access to each employee’s data along with their position in the list, such as whether they are the first or last item.

It uses the iterator directive to loop through the list and conditionally displays a header at the start (if:true={emp.first}), a list item for each employee showing company and name, and a footer placeholder at the end (if:true={emp.last}). The key directive on the outer div ensures each item has a unique identifier.

Now, make the component available for the Lightning pages by following the code below in the meta.xml file.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

Now, deploy the Lightning Web Component to the Lightning page to view the list of arrays we defined.

On the lightning page, click the gear icon, then select Edit page.
Now, from the Components tab, drag and drop the LWC component onto the Lightning page, then save the changes.

After this, on the Lightning page, we can see the record list that we have mentioned in the array.

Output:

List iteration in Salesforce Lightning web components

This way, we can iterate over a list of records in the Lightning Web Component using the iterator directive.

Conclusion

In this Salesforce tutorial, we have learned how to iterate over lists in Salesforce Lightning Web Components using the for:each anditerator directives.

Both approaches help you render dynamic lists efficiently while maintaining clean and reusable code.

Use for:each for simple iterations, and iterator when you need access to the index or want to apply specific logic to the first or last item.

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK