Iteration(loops) in Lightning Web Components

There are two ways through which you can display list in LWC.

1. for:each

2. iterator

1. Using for:each

in this example, we are displaying a list (contacts), which have 3 fields Id, Name and Title.

You can use for:item="contact" to access current item.

You can use for:index="index" to access current index.

Note: Every item in a list must have a key. When a list changes, the framework uses the key to identify each item so that it can 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 index as a value for key. Assign unique keys to an incoming data set. To add new items to a data set, use a private property to track and generate keys.

In this example we are using <li key={contact.Id}> to assign unique id.

2. Using iterator - The difference between for:each and iterator is that you can directly access first and last element of the list any time.

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.

Example -