Onclick of button iterate and display map from server to client side controller



Aura 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;
    }
}

c:SampleAuraController

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

JS

({
    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();
                console.log('res'+JSON.stringify(result));
                var arrayMapKeys = [];
                for(var key in result){
                    arrayMapKeys.push({key: key, value: result[key]});
                }
                component.set("v.mapValues", arrayMapKeys);
            }
        });
        $A.enqueueAction(action);
    }
})


SampleAuraController_app

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

O/p

Onclik of iterate Map

displays

Fruits
Apple
Orange
Banana
Grapes

Vegetables
Cabbage
Carrot
Potato

Tomato


Comments

Popular posts from this blog

Lightning Grid Custom Datatable

Comparing Two Values Using Aura If

Dynamic Standard Datatable Using Fieldset