How to Iterate Map values in Lightning Component ?

January 13, 2017April 5, 2017 piyush soni 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"/>

{!v.key} --- {!v.value}

</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">

<aura:attribute name="lstKey" type="List"/>

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

<ui:button label="Iterate Map" press="{!c.fetchMapCtrl}"/>

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

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

(Visited 29,967 times, 1 visits today)

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

}

Anonymous says:

January 2, 2018 at 10:02 pm

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

Reply
Ajith Kumar s says:

January 10, 2019 at 6:24 am

var map = component.get(“v.map”);

not getting value from component

Reply
Anonymous says:

April 11, 2019 at 9:25 am

Nice demonstration…keep up the good work.

Reply
??? says:

October 15, 2019 at 8:36 am

Love lighting at the cold night !

Reply