List Iteration in Salesforce Lightning Web Components
Summary
This piece clearly explains how to perform list iteration in Salesforce Lightning Web Components using the for:each and iterator directives. It details how to loop through arrays of records, like contacts or employees, rendering them efficiently with unique keys for better DOM performance. The examples show how to implement simple iterations with for:each and more advanced ones with iterator to access index and conditional logic. Teams can build dynamic lists, such as contact lists or employee rosters, within LWCs using these patterns for reusable and maintainable components.
Takeaways
- Use for:each directive for simple list iterations in LWC templates.
- Always assign a unique key to items using the key directive for performance.
- Use iterator directive to access index, first, and last properties during loops.
- Structure LWC HTML with nested <template> tags for looping over lists.
- Expose LWC components with proper meta.xml to make them available on Lightning pages.
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 dire ctives, 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 .