Iterate map values

How to Iterate Map values in Lightning Component ?

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

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

(Visited 17,687 times, 1 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