Iterate Map List Values in Lightning Component

Apex Class

public class SampleAuraController {

     

    @AuraEnabled

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

                <strong><p>{!mapKey.key}</p></strong>

                <aura:iteration items="{!mapKey.value}" var="mapValue">

                    <p>{!mapValue}</p>

                </aura:iteration>

            </aura:iteration>

        </div>

    </div>

</aura:component>

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

            }

        });

        $A.enqueueAction(action);

    }

})







OUTPUT: