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]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
({ 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]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
({ 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
|
1 2 3 4 5 6 7 8 |
<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. ?
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.
I am getting an error while saving “No COMPONENT named markup://c:mapEntryChild found : [markup://c:Display_SideBar_TasksSubTasks]: Source”
var map = component.get(“v.map”);
not getting value from component
Nice demonstration…keep up the good work.