Tag Archives: Map

Iterate Map values in Lightning Component

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:

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