How to render list of items in lightning web components(lwc)

This post explains how to render a list of items in lightning web components(lwc)

To render a list of items in Lightning web components(lwc), we use for:each or iterator directives.
 Add the directive to a nested <template> tag that encloses the HTML elements you want to repeat.

Note:

• 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 in the template is used for performance optimization and isn’t reflected in the DOM at run time.

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.
• you can use them for:index="index" to access the current item index, it is optional

Example:

forEachDirectiveDemo.html

<template>
    <lightning-card title="For Each Directive Demo" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={cities} for:item="citiname">
                <li key={citiname.Id}>
                    <b style="color:cornflowerblue">{citiname.Name}</b>
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

forEachDirectiveDemo.js

import { LightningElement, track } from 'lwc';

export default class ForEachDirectiveDemo extends LightningElement {
    @track cities = [
        {
            Id: 1,
            Name: 'Hyderabad',
        },
        {
            Id: 2,
            Name: 'Noida',
        },
        {
            Id: 3,
            Name: 'Pune',
        },
    ];
}

forEachDirectiveDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="forEachDirectiveDemo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Result:

iterator

If you want add special behavior to the first or last item in a list, use the iterator directive,
  iterator:iteratorName={array}. Use the iterator directive on a template tag.

Use iteratorName to access these properties:

• value—The value of the item in the list. Use this property to access the properties of the array. For example, iteratorName.value.propertyName.
• 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.

Example:

iteratorDirectiveDemo.html

<template>
    <lightning-card title="Iterator Directive Demo" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template iterator:it={cities}>
                <li key={it.value.Id}>
                    <div if:true={it.first} style="border-top: 1px solid rgb(48, 17, 224);padding-top: 5px;"></div>
                    {it.value.Name}
                    <div if:true={it.last} style=" border-bottom: 1px solid rgb(209, 17, 17);padding-bottom: 5px;"></div>
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

iteratorDirectiveDemo.js

import { LightningElement, track } from 'lwc';

export default class IteratorDirectiveDemo extends LightningElement {
    @track cities = [
        {
            Id: 1,
            Name: 'Hyderabad',
        },
        {
            Id: 2,
            Name: 'Noida',
        },
        {
            Id: 3,
            Name: 'Pune',
        },
    ];
}

Result:

Resource:
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_lists