use map

How to use Map in lightning Component

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-:

map-value output image

Check Also : Iterate Map values in Salesforce Lightning Component.

Bravo!!   🙂

7 comments

    • 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 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>

Leave a Reply