Render Lists In Lightning Web Components

One of the most common use cases is to iterate through the collection when you are working on data collection. Let’s discuss here what all the different ways to do it in lightning web components. 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 <template> tag that encloses the HTML elements you want to repeat. Please refer this link for web component environment setup

Using for:each directive

Let us discuss here how to use the for:each. When using the for:each directive, use for:item=”currentItem” to access the current item. To assign a key to the first element in the nested template, use the key={uniqueId} directive. 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 must be a string or a number, it can’t be an object. You can’t use the index as a value for the key. Assign unique keys to an incoming data set. Here is the simple apex class that will get the data from the account object and its contacts. create an apex class using the below  SFDX command.

Here is the complete code.

Below is the lightning web component that will iterate over an array called accounts, which is defined in the component’s JavaScript class.  Run the following SFDX command to create a web component


the above markup is iterating the data using the for:each directive as like below.



Now push the component changes to scratch org and add this component to the record page. You can able to see the collection iteration data as shown below.


Nested Iteration using for:each directive

Now let us iterate the nested loop using the for:each directive .here is the example that will render the account and its contacts. Update the CollectionExample.html markup with the below code and push the changes to scratch org.

Push the change to scratch org and reload the page. Here is the final output.


Using Iterator directive

Iterator directive is another way to render the collection data. To apply a special behavior to the first or last item in a list, use the iterator directive, iterator:iteratorName={array}. Use iteratorName to access these properties:

  1. value—The value of the item in the list. Use this property to access the properties of the array. For example, iteratorName.value.propertyName.
  2. index—The index of the item in the list.
  3. first—A boolean value indicating whether this item is the first item in the list.
  4. last—A boolean value indicating whether this item is the last item in the list.

This sample code uses the same array as the previous example. To apply special rendering to the first and last items in the list, the code uses the first and last properties with the if:true directive. Update the  CollectionExample.html code with below code . in this example we will be displaying the list of accounts.


Push the changes to scratch org and you can able to see these changes after reload.

Now let us see how to do the nested iteration using iterator directives . in this example we will be displaying accounts and its contacts. here is the HTML markup for the nested iteration.


Push the changes to the scratch org and reload the page. you can able to see the output as shown below and will be displayed account and its contacts.