Iterate/loop List using Iterator in LWC

Iterator directive also used for iterate list / array of items. and it has a special behavior to find the first or last item in a list. 

Here sample code for Iterator using in lwc

 <template iterator:it={fruitsList}>
	<li key={it.value.Id}>
		<div if:true={it.first} class="slds-border_top"></div>
		{it.value.Id}. {it.value.Name}
		<div if:true={it.last} class="slds-border_bottom"></div>
	</li>
</template>

Here,

• iterate:it: is a list or items
• Value: The value of the item in the list
• it.first: Returns true, if the current item is first in the list
• it.last:  Returns true, if the current item is Last in the list

Iterate an array using Iterator in LWC

IterateUsingIterator.html

<template>
    <lightning-card title="Iterate using Iterator" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template iterator:it={fruitsList}>
                <li key={it.value.Id}>
                    <div if:true={it.first} class="slds-border_top"></div>
                    {it.value.Id}. {it.value.Name}
                    <div if:true={it.last} class="slds-border_bottom"></div>
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

IterateUsingIterator.js

import { LightningElement } from 'lwc';

export default class IterateUsingIterator extends LightningElement {
     // Creating an array with some data
     fruitsList = [
        {
            Id: 1,
            Name: "Apple"
        },
        {
            Id: 2,
            Name: "Banana"
        },
        {
            Id: 3,
            Name: "Mango" 
        },
        {
            Id: 4,
            Name: "Orange" 
        }
    ];
}

IterateUsingIterator component Output:

Also found above code in Tech Shorts Git repo

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