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>
Output:
