Iterate map values

How to Iterate Map values in Lightning Component ?

Lightning Component

Sharing is caring!

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]

  • 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]

Controller [mapEntryChildController.js]

  • 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]

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

Controller [SampleMapController.js]

  • See code comments 🙂

TestApp.app

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

Sharing is caring!

(Visited 9,399 times, 64 visits today)

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

     

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

Leave a Reply