Tag Archives: Map

Iterate Map List Values in Lightning Component

Apex Class:

public class SampleAuraController {
    Public static Map<string, List<string>> getMap(){ 
        Map<String, List<string>> mapObj = new Map<String, List<string>>();
        List<string> fruits = new List<String>{'Apple', 'Orange', 'Banana', 'Grapes'};
		List<string> vegetables = new List<String>{'Cabbage', 'Carrot', 'Potato', 'Tomato'};
		mapObj.put('Fruits', fruits);
        mapObj.put('Vegetables', vegetables);  
        return mapObj;

Lightning Component:

<aura:component controller="SampleAuraController">
    <aura:attribute name="mapValues" type="object" />	
    <div class="slds-m-around_xx-large">
        <div class="slds-box slds-theme_default">
            <lightning:button label="Iterate Map" onclick="{!c.getMapValues}"/>
            <aura:iteration items="{!v.mapValues}"  var="mapKey" indexVar="key">  
                <aura:iteration items="{!mapKey.value}" var="mapValue">

Lightning Component JS Controller:

    getMapValues : function(component, event, helper) {
        var action = component.get("c.getMap");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS"){
                var result = response.getReturnValue();
                var arrayMapKeys = [];
                for(var key in result){
                    arrayMapKeys.push({key: key, value: result[key]});
                component.set("v.mapValues", arrayMapKeys);


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