Hello friends, today we are going to discuss how to Iterate Map in Lightning Web Components (LWC). A map is a combination of keys and values that are paid together. Here, each unique key maps to a single value. Here we will iterate the Apex Map variable in LWC. Often we face this type of issue in LWC because we can easily use map in Apex class but the main point is how can we show the data in the UI part in Lightning Web Components (LWC).
Also check this: Clone Record By Apex in Salesforce
Key Highlights :
- Use Apex Map in LWC
- Works with key-value and show in Html
Code :
Step 1: Here we will create the first apex class in which we feed the Map variable. Let’s start on code.
LWCMapCtrl.cls :
public class LWCMapCtrl {
@AuraEnabled(cacheable=true)
public static Map<String, String> fetchMapData(){
Map<String, String> mapDepartmentData = new Map<String, String>();
mapDepartmentData.put('Anil', 'Computer Science');
mapDepartmentData.put('Ankit', 'Electronics & Communication');
mapDepartmentData.put('Rijwan', 'Electronics & Communication');
mapDepartmentData.put('Himanshu', 'Computer Science');
mapDepartmentData.put('Deepak', 'Mechnical');
return mapDepartmentData;
}
}
Step 2: In this step, we will create an LWC component in which first we fetch the data from the Apex class by the Wire method. After this, We will take the help of JavaScript to convert the Map into array of objects and then will iterate that.
We have used JavaScript to iterate the map and store that in an object array list. After we iterate that array list using the template in key and value in LWC.
In Lightning Web Component (LWC) we use template for:each={mapData} for:item="mapKey" to iterate the list.
LWCMap.HTML :
<template>
<lightning-card title="Iterate Map in Lightning Web Components" icon-name="standard:data_mapping">
<div slot="footer">
</div>
<table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered slds-table_striped">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div title="Key">Name</div>
</th>
<th scope="col">
<div title="Value">Department</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={mapData} for:item="map">
<tr key={map.key}>
<th scope="col">
<div title={map.key}>{map.key}</div>
</th>
<th scope="col">
<div title={map.value}>{map.value}</div>
</th>
</tr>
</template>
</tbody>
</table>
</lightning-card>
</template>
LWCMap.JS :
import { LightningElement, wire, track } from 'lwc';
import fetchMapData from '@salesforce/apex/LWCMapCtrl.fetchMapData';
export default class LWCMap extends LightningElement {
@track mapData= [];
@track error;
@wire(fetchMapData)
wireMapData({error, data}) {
if (data) {
console.log(data);
var conts = data;
for(var key in conts){
this.mapData.push({value:conts[key], key:key});
}
} else if (error) {
this.error = error;
}
}
}
Output :
Total views : 1113312
1 comment
Hi ,
how to display the data of Map<string,Map> in LWC component