Iterate map values

How to Iterate Map values in Lightning Component ?

Uncategorized

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..

Iterate map values

Iterate map values

Iterate map values

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 -:

Iterate map values

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. ?

4 comments

  • Hi,

    Have you use Set collection in lightning controller.

    If yes,then how to add element in set.I am using following tag but the element are not getting add in the set.

    var mySet = new Set();
    var listAcc = component.get("!v.listAccount");
    for(var key in listAcc){
    mySet.add(listAcc[key].Product.Name); 
    }

     

  • I am getting an error while saving “No COMPONENT named markup://c:mapEntryChild found : [markup://c:Display_SideBar_TasksSubTasks]: Source”

Leave a Reply