For utilizing the map within the lightning element, we have to outline the attribute of the sort map to carry key-value pairs. On this weblog, we are going to see two alternative ways to make use of the map within the lightning element.
- Merely storing and displaying worth from the map within the element.
- Displaying map through the use of aura iteration.
Case 1: Merely Storing and Displaying Worth from the Map within the Element.
Let’s perceive with a easy instance:
Step 1: Construct A Lightning Element
<aura:element controller="Mapvalue" >
<aura:handler title="init" worth="{!this}" motion="{!c.doinit}"/>
<aura:attribute sort="map" title="Mapuse"/> // Map sort attribute to carry the worth of map
{!v.Mapuse.key1}
{!v.Mapuse.key2}
{!v.Mapuse.key3}
</aura:element>
Notice: The init technique get’s known as after the development of element is over and can name doinit technique within the JS controller.
Step 2: Construct A Javascript Controller
({
doinit : perform(element, occasion, helper)
{
var motion= element.get('c.getmymap'); // Calling apex technique
motion.setCallback(this,perform(response) // getting response again from apex controller
{
var state=response.getState(); // getting the state
if(state==='SUCCESS')
{
element.set('v.Mapuse',response.getReturnValue()); // setting the worth in map attribute
}
});
$A.enqueueAction(motion);
}
})
Do not forget to take a look at: Learn All About Collections in Salesforce: List, Set and Map
Step 3: Construct Apex Controller
public class Mapvalue
{
@AuraEnabled // Methodology should be AuraEnabled in apex
public static map<string,string> getmymap()
{
map<string,string> putkeyvalue= new map<string,string>();
putkeyvalue.put('key1', 'Value1'); // Setting key,worth in map
putkeyvalue.put('key2', 'Value2');
putkeyvalue.put('key3', 'Value3');
return putkeyvalue;
}
}
Step 4: Previewing With An Utility
<aura:utility extends="power:slds"> <c:Firstlightningcomponent/> </aura:utility>
After Preview:
Try one other superb weblog by Mohit right here: What is Pardot? What is Engagement History in Salesforce in 2023?
Case 2: Displaying Map by Utilizing Aura Iteration Methodology
Step 1: Apex Controller
public class mapIterateApexClass {
@AuraEnabled // Methodology should be AuraEnabled in apex
public static map<string,string> getmymap()
{
map<string,string> putkeyvalue= new map<string,string>();
putkeyvalue.put('key1', 'Value1'); // Setting key,worth in map
putkeyvalue.put('key2', 'Value2');
putkeyvalue.put('key3', 'Value3');
return putkeyvalue;
}
}
Step 2: Create a lightning element (title=”mapIteration.cmp”).
<aura:element controller="mapIterateApexClass" >
<aura:attribute sort="record" title="list1"/>
<aura:attribute sort="map" title="map1"/>
<ui:button label="Iterate Map in lightning element" press="{!c.getMapValues}" />
<aura:iteration objects="{!v.list1}" var="key"> // Iterating over keys in record
<c:mapIterationChild map="{!v.map1}" key="{!key}" /> // Calling youngster element
</aura:iteration>
</aura:element>
Step 3: mapIterationController.js
({
getMapValues : perform(element, occasion, helper) {
var motion= element.get('c.getmymap');
motion.setCallback(this,perform(response)
{ var arrayToStoreKeys=[]; // Declaring array to retailer values.
var state=response.getState();
var response1=response.getReturnValue();
if(state==='SUCCESS')
{
element.set('v.map1',response.getReturnValue()); // Storing response in map.
}
for(var key in response1 )
{
arrayToStoreKeys.push(key); // Pushing keys in array
}
element.set('v.list1',arrayToStoreKeys); // Storing keys in record.
});
$A.enqueueAction(motion);
}
})
Step 4: Create a lightning element title=”mapIterationChild.cmp”
<aura:element >
<aura:handler title="init" worth="{!this}" motion="{!c.doinit}"/>
<aura:attribute sort="map" title="map"/>
<aura:attribute sort="string" title="key"/>
<aura:attribute sort="string" title="worth"/>
{!v.key}-------{!v.worth} // Displaying Key,Worth.
</aura:element>
Step 5: mapIterationChildController.js
({
doinit : perform(element, occasion, helper) {
var key=element.get("v.key");
var map=element.get("v.map");
element.set("v.worth",map[key]);
}
})
Step 6: Utility to run the element
<aura:utility extends="power:slds"> <c:mapIteration></c:mapIteration> </aura:utility>
Step 7) After Preview
