How to Use Map in Lightning Component

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

1) Simply storing and displaying value from the map in the lightning component.

2) Displaying map by using aura iteration.

Case 1) Simply storing and displaying value from the map in the lightning 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 map value

        {!v.Mapuse.key1} 

        {!v.Mapuse.key2}

        {!v.Mapuse.key3}

</aura:component>

Note:  The init method get's call after the construction of component is over and will call doinit method in the javascript 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 method

        {

                  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);

  }

})

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,

Case 2) Displaying map by using aura iteration.

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 above component

<aura:application extends="force:slds">

 <c:mapIteration></c:mapIteration>

</aura:application>

STEP 7) After Preview,

Other Post From Blog:

• Init Event in Salesforce Lightning (Click here)

• Change Event in Salesforce Lightning (Click here)

TAGS:How to Use Map in Lightning Component, Map in salesforce lightning, how to iterate map in lightning component.