How to iterate a list in lwc component Salesforce? - Salesforce Globe For You
Solution: Use for:each attribute to iterate the list in lwc component.
Example:
iterateListInLWC.html
<template>
<lightning-card title="Following are the months present in a year" icon-name="custom:custom14">
<ul class="slds-m-around_medium">
<template for:each={months} for:item="month">
<li key={month.Name}>
{month.Name}
</li>
</template>
</ul>
</lightning-card>
</template>
iterateListInLWC.js
import { LightningElement } from 'lwc';
export default class IterateListInLWC extends LightningElement {
months = [
{
Name: 'January',
},
{
Name: 'February',
},
{
Name: 'March',
},
{
Name: 'April',
},
{
Name: 'May',
},
{
Name: 'June',
},
{
Name: 'July',
},
{
Name: 'August',
},
{
Name: 'September',
},
{
Name: 'October',
},
{
Name: 'November',
},
{
Name: 'December',
},
];
}
iterateListInLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>50.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output:
No comments:
Post a Comment