Apex Controller:
Create below apex controller to get the Map value.
public class MapAuraController { @AuraEnabled public static map<Integer, String> getMap(){ Map<Integer, String> companyMap = new Map<Integer, String>(); //Put value in Map companyMap.put(1,'Salesforce'); companyMap.put(2,'SAP'); companyMap.put(3,'Oracle'); companyMap.put(4,'Microsoft'); //return map return companyMap; } }
Child Component:
Create below Child.cmp
for display the Map key values on component.
<!--Child.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>
Child Component JS Controller:
Create below JavaScript Controller for above Child.cmp
component.
({ doInit : function(component, event, helper) { var key = component.get("v.key"); var map = component.get("v.map"); component.set("v.value" , map[key]); }, })
Parent Component:
Create below Parent.cmp
, this is the main component. By this component we retrieve the map value from apex controller and pass key and map attribute to Child.cmp
component.
<!--Parent.cmp--> <aura:component controller="MapAuraController"> <!--declare attributes--> <aura:attribute name="keyList" type="List"/> <aura:attribute name="companyMap" type="map"/> <ui:button label="Iterate Map" press="{!c.getMapCompany}"/> <!--Iterate the mapCompany--> <aura:iteration items="{!v.keyList}" var="key" > <c:Child map="{!v.companyMap}" key="{!key}"/> </aura:iteration> </aura:component>
Parent Component:
Create below JavaScript Controller for above Parent.cmp
component.
({ getMapCompany: function(component, event, helper) { //call apex class method var action = component.get('c.getMap'); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { //Create an empty array to store the map keys var arrayMapKeys = []; //Store the response of apex controller (return map) var result = response.getReturnValue(); //Set the store response[map] to component attribute, which name is map and type is map. component.set('v.companyMap', result); for (var key in result) { arrayMapKeys.push(key); } //Set the list of keys. component.set('v.keyList', arrayMapKeys); } }); // enqueue the Action $A.enqueueAction(action); } })
Lightning Test App:
<!--Test.app--> <aura:application extends="force:slds"> <c:Parent /> </aura:application>