Displaying Map key value pair in lightning component

Question

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

Answer 1

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?