Example: Render Lists with Template Expressions
To render a list of items, use the for:each directive or the iterator directive to iterate over an array, with support for complex expressions in the template.
Which should you use? The iterator directive has first and last properties that let you apply special behaviors to the first and last items in an array.
Regardless of which directive you use, you must use a key directive to assign a unique ID to each item. When an item changes, the framework uses the key to re-render only the item that changed.
The key in the template is used for performance optimization and isn't reflected in the HTML or DOM at runtime.
The code you write to render lists is standard HTML and JavaScript, except for the directives, which are specific to Lightning Web Components and template expressions.
To render an array, add the for:each="{}" directive to a nested <template> tag that encloses the HTML elements you want to repeat with quoted curly brackets. Inside the brackets, you can use an expression to return a valid array. To access the current item, use for:item="_currentItem_". To access the current item's index, use for:index="index". To assign a key to every element in the list, use the key={_uniqueId_} directive.
This example iterates over an array called contacts, defined in the component's JavaScript class, and uses template expressions to format the output.
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 re-render 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. Use a natural key, like a record ID. Or, 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.
To apply a special behavior to the first or last item in a list, use the iterator directive, iterator:_myiteratorname_={_someArray_}. Add the iterator directive to a nested <template> tag that encloses the HTML elements you want to repeat. _myiteratorname_ must be in lowercase.
Use _myiteratorname_ to access these properties:
value— The value of the item in the list. Use this property to access the properties of the array item. For example,_myiteratorname_.value._aPropertyName_.index— The index of the item in the list.first— A boolean value indicating whether this item is the first item in the list.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 and complex expressions.
If the item is first in the list, the <div> tag renders with the styling defined in the CSS list-first class. If the item is last in the list, the <div> tag renders with the styling defined in the CSS list-last class.
To access a property of an item in the iteration, use the value property of the iteration. That is, _myiteratorname_.value._propertyName_, not _myiteratorname_._propertyName_. For example, in the template above, look at {it.value.firstName} and {it.value.lastName}.