TemplateLoopingForEach

templateLoopingForEach.css

.list-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 50%;
}
.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.list-group-item-action {
  color: #495057;
  text-align: inherit;
  text-decoration: none;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

templateLoopingForEach.html

<template>
    <lightning-card title="for:each demo with array" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={carList} for:item="car">
                <a href="#" key={car} class="list-group-item list-group-item-action">{car}</a>
            </template>
        </ul>
    </lightning-card>
    <lightning-card title="for:each demo with array of objects" icon-name="custom:custom15">
        <ul class="slds-m-around_medium">
            <template for:each={programmingList} for:item="program">
                <a href="#" key={program.id} class="list-group-item list-group-item-action">{program.language}</a>
            </template>
        </ul>
    </lightning-card>
</template>

templateLoopingForEach.js

import { LightningElement } from 'lwc';

export default class TemplateLoopingForEach extends LightningElement {
    carList = ["Ford", "Audi", "Maruti", "Hyundai", "Mercedes"];
    programmingList = [
        {
            id: "06868",
            language: "HTML"
        },
        {
            id: "19797",
            language: "CSS"
        },
        {
            id: "298789",
            language: "Javascript"
        },
        {
            id: "398798",
            language: "Apex"
        },
        {
            id: "48967",
            language: "Aura"
        },
        {
            id: "58798",
            language: "Java"
        }
    ];
}

templateLoopingForEach.js-meta.xml

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