Tuesday, September 4, 2018

How to Use Map in Lightning Component

 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,



how to iterate map in lightning component

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,


Map in salesforce lightning


Other Post From Blog:


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

3 comments:

  1. How do you display the key and values if key is a string and value is a List of String?

    ReplyDelete
    Replies
    1. https://www.sfdc-lightning.com/2020/01/how-to-iterate-over-map-with-list-values-in-lightning-web-components.html

      Delete