Template Looping in LWC

February 14, 2021 nisarkhan ASP.NET, 0

<template>
    <lightning-card title="for:each loop">
        <div class="slds-var-m-around_medium">
            <template for:each={carList} for:item="car">
                <ul key={car} class="slds-has-dividers_around-space">
                    <li class="slds-item">{car}</li>
                </ul>
            </template>
        </div>
    </lightning-card>

    <lightning-card title="for:each loop with array of objects">
        <div class="slds-var-m-around_medium">
            <template for:each={ceoList} for:item="list">
                <ul key={list.id} class="slds-has-dividers_around-space">
                    <li class="slds-item">{list.name} {list.company}</li>
                </ul>
            </template>
        </div>
    </lightning-card>

    <lightning-card title="iterator loop">
        <div class="slds-var-m-around_medium">
            <template iterator:ceo={ceoList}>
                <div key={ceo.value.id}>
                    <ul class="slds-has-dividers_around-space">
                        <template if:true={ceo.first}>
                            <div class="slds-box slds-theme_shade">
                                <strong>
                                    List of top companies and there COE's
                                </strong>
                            </div>
                        </template>
                        
                        <li class="slds-item">
                            <strong>{ceo.value.company} </strong>
                            {ceo.value.name}
                        </li>

                        <template if:true={ceo.last}>
                            <div class="slds-box slds-theme_shade">
                                <strong>
                                    Thanks for reading the list
                                </strong>
                            </div>
                        </template>
                    </ul>
                </div>
               
            </template>
        </div>
    </lightning-card> 
</template>

import { LightningElement } from 'lwc';

export default class Looping extends LightningElement {
    carList =["Ford", "Audi", "Maruti", "Hyundai", "Mercedes"]


    ceoList = [
        {
            id:1,
            company:"Google",
            name:"Sundar Pichai"
        },
        {
            id: 2,
            company: "Apple Inc.",
            name: "Tim cook"
        },
        {
            id: 3,
            company: "Facebook",
            name: "Mark Zuckerberg"
        },
        {
            id: 4,
            company: "Amazon",
            name: "Jeff Bezos"
        },
    ]

}

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

Conditional Rendering in LWC Accessing Elements in the Component in LWC