Tag Archives: Map

Iterate Map values in Lightning Component

Apex Controller:
Create below apex controller to get the Map value.

public class MapAuraController {
    public static map<Integer, String> getMap(){
        Map<Integer, String> companyMap = new Map<Integer, String>();
        //Put value in Map 
        //return map  
        return companyMap;

Child Component:
Create below Child.cmp for display the Map key values on component.

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

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.

<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}"/>

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) {
                //Set the list of keys.     
                component.set('v.keyList', arrayMapKeys);
        // enqueue the Action   

Lightning Test App:

<aura:application extends="force:slds">
    <c:Parent />


Get Map Result From SOQL Query in Salesforce

//Creating Map with account id as key and account record as value
Map<Id,Account> accountMap = new Map<Id,Account>([SELECT Id, Name, Site, Rating, AccountNumber From Account LIMIT 100]);
//Getting list of account using map.values method
List<account> accList = accountMap.values();
//Getting set of account Id's using map.keySet method
Set<Id> accIdSet = accountMap.keySet();
//Getting list of account Id's using list.addAll method
List<Id> accIdList.addAll(accIdSet);