How to Iterate Map values in Lightning Component ?

Iterate Map values in Salesforce Lightning Component.

In this post, we are seeing that How to Iterate map values in salesforce lightning component. By using the aura:iteration tag.

Prerequisites : basic understanding of Lightning Component and apex programming

How to Use map in lightning component ? Click here to see Example..

Apex class [MyMapController.apxc]

public class MyMapController {
   
    @AuraEnabled
    public static map<String,String> getMyMap(){
        Map<String,String> Mymap = new Map<String,String>();
       // put value in Map 
          Mymap.put('key1','Apple');
          Mymap.put('key2','Mango');  
          Mymap.put('key3','Orange');  
          Mymap.put('key4','Banana');  
       // return map  
          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.

mapEntryChild Component [child component]

Lightning Component [mapEntryChild.cmp]

<aura:component >
 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="map" type="map"/>
    <aura:attribute name="key" type="string"/>
    <aura:attribute name="value" type="string"/>
    
    <p>{!v.key} --- {!v.value}</p>
    
</aura:component>

Controller [mapEntryChildController.js]

({
	doInit : function(component, event, helper) {
        var key = component.get("v.key");
        var map = component.get("v.map");
  
        // set the values of map to the value attribute	
        // to get map values in lightning component use "map[key]" syntax. 
        component.set("v.value" , map[key]);
	},
})

• In the above JS controller we have only single doInit function which is fire on component Initialize.
• in mapEntry component we have map and key attribute which is set/pass by the SampleMap  [parent]component.

SampleMap Component [Parent component]

Lightning Component [SampleMap.cmp]

<aura:component controller="MyMapController">
   <!--declare attributes-->
   <aura:attribute name="lstKey" type="List"/>
   <aura:attribute name="fullMap" type="map"/>
    
   <ui:button label="Iterate Map" press="{!c.fetchMapCtrl}"/>
    
   <!--Iterate the mapEntry Component.-->
   <aura:iteration items="{!v.lstKey}" var="key" >
      <c:mapEntryChild map="{!v.fullMap}" key="{!key}"/>
   </aura:iteration>
    
</aura:component>

• SampleMap is our parent component.
• By this component we are iterate our child component to display the Map values.

Controller [SampleMapController.js]

({
    fetchMapCtrl: function(component, event, helper) {
        //call apex class method 
        var action = component.get('c.getMyMap');
        action.setCallback(this, function(response) {
            //store response state 
            var state = response.getState();
            if (state === "SUCCESS") {
                // create a empty array for store map keys 
                var arrayOfMapKeys = [];
                // store the response of apex controller (return map)     
                var StoreResponse = response.getReturnValue();
                console.log('StoreResponse' + StoreResponse);
                // set the store response[map] to component attribute, which name is map and type is map.   
                component.set('v.fullMap', StoreResponse);

                for (var singlekey in StoreResponse) {
                    arrayOfMapKeys.push(singlekey);
                }
                // Set the all list of keys on component attribute, which name is lstKey and type is list.     
                component.set('v.lstKey', arrayOfMapKeys);
            }
        });
        // enqueue the Action   
        $A.enqueueAction(action);
    },
})

• See code comments 🙂

TestApp.app

<aura:application >
<c:SampleMap/>
 <!-- here c: is org. namespace prefix-->
</aura:application>

Output -:

Related Resources :

Map Collection in lightning component

How to Use map in lightning component

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box. ?