Codice html

<template>

    <lightning-card title="HelloForEach" icon-name="action:goal">

        <ul class="slds-m-around_medium">
            <template for:each={contacts} for:item="contact">
                <li key={contact.Id}>
                    {contact.Name}, {contact.Title}
                </li>
            </template>
        </ul>
        <c-view-source source="lwc/helloForEach" slot="footer">
            Il file css deve avere lo stesso nome del file html e js a differenza dell'estensione
        </c-view-source>

    </lightning-card>

</template>

Controller

// le prime due righe si ripetono quasi identiche per ogni componente
import { LightningElement } from 'lwc';

export default class HelloForEach extends LightningElement {
    // oggetto con i dati
    contacts = [
        {
            Id: '003171931112854375',
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: '003192301009134555',
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: '003848991274589432',
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}