How to use Map in lightning Component
Prerequisites : basic understanding of Lightning Component and apex programming
MyMapController.apxc
public class MyMapController { @AuraEnabled public static map<String,String> getMyMap(){ // create map Map<String,String> Mymap = new Map<String,String>(); // put value in Map Mymap.put('key1','Apple'); Mymap.put('key2','Mango'); return Mymap; } }
- First we create our component controller class.
- In this apex class we have a @AuraEnabled getMyMap() method which return type is Map type.
- In this method first we created a new map called Mymap and put value on it . (‘key’ , ‘value’) and return the map.
MapComponent.cmp
<aura:component controller="MyMapController"> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="myMap" type="Map" /> <li>Key 1 value is {!v.myMap.key1}</li> <li>Key 2 value is {!v.myMap.key2}</li> </aura:component>
- Next we create our lightning component.
- On the component initialize we call doInit js function and set the return value in myMap aura:attribute .
- And we can access map attribute value in component by using this syntax -:
{! v.MapAttributeName.keyName }
MapComponentController.js
({ doInit: function(component, event, helper) { //call apex class method var action = component.get('c.getMyMap'); action.setCallback(this,function(response){ //store state of response var state = response.getState(); if (state === "SUCCESS") { //set response value(map) in myMap attribute on component. component.set('v.myMap',response.getReturnValue()); } }); $A.enqueueAction(action); }, })
TestApp.app
<aura:application > <c:MapComponent /> <!-- here c: is org. namespace prefix--> </aura:application>
Output-:
Check Also : Iterate Map values in Salesforce Lightning Component.
Bravo!! 🙂
7 comments
How to get the value of map item inside of js-controller? (Directly from view, not from Apex class)
Hi Igor,
You can try this way: component.get(“v.sectionLabels”)[‘a’];
Or
for(var item in mapData){
if(item == Country){
component.set(“v.cities”, mapData[item] );
}
}
where mapData is the Map attribute, it iterates the all keys in map and if the key matches the key you are searching, then get the data using (mapData[item]).
Hello,
How can I pass keyName in {! v.MapAttributeName.keyName } dynamically and get the value ?
Thanks.
Hello,
How can I pass keyName in {! v.MapAttributeName.keyName } dynamically ?
Thanks.
Hello MB,
You can access the map dynamically in component. For that purpose, you need to perform some logic in controller.js, I got the code snippet from stackoverflow, would be glad if it can help you.
Apex Class:-
public class LightningController {
@AuraEnabled
public static Map fetchMapData() {
Map mapCustomer = new Map ();
mapCustomer.put(‘Sample’, ‘Value’);
mapCustomer.put(‘Sample1’, ‘Value1’);
mapCustomer.put(‘Sample2’, ‘Value2’);
mapCustomer.put(‘Sample3’, ‘Value3’);
return mapCustomer;
}
}
Lightning Component:-
{!cus.key} – {!cus.value}
Controller:-
({
fetch : function(component, event, helper) {
var action = component.get(“c.fetchMapData”);
action.setCallback(this, function(response) {
var state = response.getState();
if (state === “SUCCESS”) {
var custs = [];
var conts = response.getReturnValue();
for(var key in conts){
custs.push({value:conts[key], key:key});
}
component.set(“v.customers”, custs);
}
});
$A.enqueueAction(action);
}
})
Lightning Component:-
<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes” access=”global” controller=”LightningController”>
<ui:button label=”Fetch” press=”{!c.fetch}”/>
<br/><br/>
<aura:attribute name=”customers” type=”List” />
<aura:iteration items=”{!v.customers}” var=”cus” indexVar=”key”>
{!cus.key} – {!cus.value}<br/><br/>
</aura:iteration>
</aura:component>
Hi Great Work