Tuesday, September 4, 2018

How to Use Map in Lightning Component

To use map in lightning component,we need to define attribute of type map to hold key value pair.In this topic we will see two different ways to use map in lightning component.

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

2)Displaying map by using aura iteration.


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


Syntax for map type attribute:

<aura:attribute type="map" name="mapName"/>

 Use Map in Lightning Component

Let us 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 construction of component is over and will call doinit method in javascript controller.



Step 2: Under 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 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="mapIterationChild".


<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  3) 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  4) Create a lightning component name="mapIteration".


<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  5) 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  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 topics:
**************************************************************************************************************

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

**************************************************************************************************************

No comments:

Post a Comment