How to Use Map In Lightning Component?

For using the map in the lightning component, we need to define the attribute of the type map to hold key-value pairs. In this blog, we will see two different ways to use the map in the lightning component.

1. Simply storing and displaying value from the map in the component. 
2. Displaying map by using aura iteration. 

Case 1: Simply Storing and Displaying Value from the Map in the Component. 

Let's understand with a simple example:

Step 1: Build A Lightning Component

<aura:component controller="Mapvalue"  > 
    <aura:handler  name="init" value="{!this}" action="{!c.doinit}"/> 
        <aura:attribute type="map" name="Mapuse"/>  // Map type attribute to hold the  value of map 
        {!v.Mapuse.key1}  
        {!v.Mapuse.key2} 
        {!v.Mapuse.key3} 
</aura:component>

Note:  The init method get's called after the construction of component is over and will call doinit method in the JS controller.

Step 2: Build A Javascript Controller

({ 
 doinit : function(component, event, helper) 
 {   
      var action=  component.get('c.getmymap');  // Calling apex method 
        action.setCallback(this,function(response)   // getting response back from apex controller 
        { 
                  var state=response.getState();            // getting the state 
        if(state==='SUCCESS') 
        { 
      component.set('v.Mapuse',response.getReturnValue());   // setting the value in map attribute 
        } 
  }); 
  $A.enqueueAction(action); 
  } 
})

Don't forget to check out: Learn All About Collections in Salesforce: List, Set and Map

Step 3: Build Apex Controller

public class Mapvalue 
{ 
    @AuraEnabled     // Method must be AuraEnabled in apex 
    public static map<string,string> getmymap() 
    { 
        map<string,string> putkeyvalue= new map<string,string>(); 
        putkeyvalue.put('key1', 'Value1');  // Setting key,value in map 
        putkeyvalue.put('key2', 'Value2'); 
        putkeyvalue.put('key3', 'Value3'); 
        return putkeyvalue; 
    } 
} 

Step 4: Previewing With An Application

<aura:application extends="force:slds"> 
    <c:Firstlightningcomponent/> 
</aura:application>

After Preview:

Check out another amazing blog by Mohit here: What is Pardot? What is Engagement History in Salesforce in 2023?

Case 2: Displaying Map by Using Aura Iteration Method

Step 1: Apex Controller

public class mapIterateApexClass { 
@AuraEnabled     // Method must be AuraEnabled in apex 
    public static map<string,string> getmymap() 
    { 
        map<string,string> putkeyvalue= new map<string,string>(); 
        putkeyvalue.put('key1', 'Value1');  // Setting key,value in map 
        putkeyvalue.put('key2', 'Value2'); 
        putkeyvalue.put('key3', 'Value3'); 
        return putkeyvalue; 
    } 
}

Step 2: Create a lightning component (name="mapIteration.cmp").

<aura:component controller="mapIterateApexClass" > 
    <aura:attribute type="list" name="list1"/> 
    <aura:attribute type="map" name="map1"/> 
    <ui:button label="Iterate Map in lightning component" press="{!c.getMapValues}" /> 
           <aura:iteration items="{!v.list1}"  var="key"> // Iterating over keys in list 
               <c:mapIterationChild map="{!v.map1}" key="{!key}" />  // Calling child component 
    </aura:iteration>   
</aura:component>

Step  3: mapIterationController.js

({ 
 getMapValues : function(component, event, helper) { 
  var action=  component.get('c.getmymap');  
        action.setCallback(this,function(response)   
        {         var arrayToStoreKeys=[];  // Declaring array to store values. 
                  var state=response.getState();   
                  var response1=response.getReturnValue(); 
        if(state==='SUCCESS') 
        { 
      component.set('v.map1',response.getReturnValue());  // Storing response in map. 
        } 
            for(var key in response1 ) 
                {      
                   arrayToStoreKeys.push(key);   // Pushing keys in array 
                } 
         component.set('v.list1',arrayToStoreKeys); // Storing keys in list. 
        }); 
  $A.enqueueAction(action); 
 } 
})

Step 4: Create a lightning component name="mapIterationChild.cmp"

<aura:component   > 
    <aura:handler  name="init" value="{!this}" action="{!c.doinit}"/> 
    <aura:attribute type="map" name="map"/> 
    <aura:attribute type="string" name="key"/> 
    <aura:attribute type="string" name="value"/> 
    {!v.key}-------{!v.value}  // Displaying Key,Value. 
</aura:component>

Step  5: mapIterationChildController.js

({ 
 doinit : function(component, event, helper) { 
  var key=component.get("v.key"); 
        var map=component.get("v.map"); 
        component.set("v.value",map[key]); 
 } 
})

Step 6: Application to run the component

<aura:application extends="force:slds"> 
 <c:mapIteration></c:mapIteration> 
</aura:application>

Step 7) After Preview