[SalesForce] Displaying Map key value pair in lightning component

I have a @AuraEnabled method which will return value of type Map
How can we display Map's key value pairs in lightning component?
for eg :

@AuraEnabled
    public static map<String,Integer> getDensityOfObject(String strField, String strObj) 
    {
        system.debug('----strField----'+strField);
        system.debug('----strObj----'+strObj);
        Map<String, Schema.SObjectType> gd = new Map<String, Schema.SObjectType>();
        Map<String,Schema.SObjectField> mapFieldNameToFieldDesc = new Map<String,Schema.SObjectField>();
        gd = Schema.getGlobalDescribe(); 

        if(String.isNotBlank(strField) && String.isNotBlank(strObj))
        {
            if(!gd.containsKey(strObj.toLowerCase()))
            {
                throw new System.NoAccessException();
                return  null;
            }else
            {
                Schema.DescribeSObjectResult R =gd.get(strObj).getDescribe();
                mapFieldNameToFieldDesc = R.fields.getMap();
                if(!mapFieldNameToFieldDesc.containsKey(strField.toLowerCase()))
                {
                    throw new System.NoAccessException();
                    return null;
                }
            }

        }
        map<String,Integer> mapStrState_intCount = new map<String,Integer>();
        Set<String> setStates = new Set<String>();

        setStates.addAll(map_AbbreviationToStateName.values());

        for(Sobject objSobject : getAllSobjectRecords(strField,strObj))
        {
                if(map_AbbreviationToStateName.containsKey(String.valueOf(objSobject.get(strField))))
                {
                    if(!mapStrState_intCount.containsKey(String.valueOf(objSobject.get(strField))))
                        mapStrState_intCount.put(String.valueOf(objSobject.get(strField)) , 1 );
                    else
                    mapStrState_intCount.put(String.valueOf(objSobject.get(strField)), mapStrState_intCount.get(String.valueOf(objSobject.get(strField)))+1);

                }
                else if(setStates.contains(String.valueOf(objSobject.get(strField))))
                {
                    for(String abbr : map_AbbreviationToStateName.keySet())
                    {
                        if(map_AbbreviationToStateName.get(abbr) == String.valueOf(objSobject.get(strField)))
                        {
                              if(!mapStrState_intCount.containsKey(abbr))
                                mapStrState_intCount.put(abbr , 1 );
                            else
                                mapStrState_intCount.put(abbr, mapStrState_intCount.get(abbr)+1);
                        }
                    }
                }

        }
        system.debug('mapStrState_intCount-----'+mapStrState_intCount);
        return mapStrState_intCount;
    }

({  
    initMap : function(component, event) 
    { 
        var action = component.get("c.getDensityOfObject");
        action.setParams({ "strField": component.get("v.strFieldName")  ,
                          "strObj" : component.get("v.strObjName")});

        action.setCallback(this, function(response)
        {
            var result = response.getState();

            if (result === "SUCCESS") 
            {
                var myMap = response.getReturnValue();
                component.set("v.stateWithCount",myMap);
             }      
         } 
        });
        $A.enqueueAction(action); 

    }
})

As you can see here, I am getting map value in helper js.
component.set("v.stateWithCount",myMap);
Now on component I want to display key-value pair from v.stateWithCount

Best Answer

This is easily done in just pure JavaScript, if you were looking for the way to do it using the component tags, I'm not sure of a built in way to do that.

Since setting the property on your component should trigger a rerender, you should be able to put this code in your afterRender function like so.

({
    afterRender: function(component, theMap) {
        var element = component.getElement();
        var ul = document.createElement("ul");
        var li;
        var text;
        for(var prop in theMap) {
            li = document.createElement("li");
            text = document.createTextNode(prop + ": " + theMap[prop]);
            li.appendChild(text);
            ul.appendChild(li);
        }
        element.appendChild(ul);
        return this.superAfterRender();
    }
});

Looking for something different?

Related Topic