2

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

2
  • At what step are you blocked? Getting the Data? Getting the data into a javascript helper method? Outputting to your components element? Or are you curious how to do this via the cmp markup?
    – Kris Gray
    May 20, 2015 at 18:27
  • @KrisGray I have edited my question. Please have a look into it.
    – Nayana
    May 21, 2015 at 5:15

1 Answer 1

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?

6
  • I am just bit confused about how to use this. Can you please provide component code too? Or give me sample demo code of overall concept for displaying map on Component.
    – Nayana
    May 23, 2015 at 6:31
  • Your component won't need much, just a <div></div>
    – Kris Gray
    May 24, 2015 at 3:12
  • There is one section for a Component called "Rerender". Do I need to copy this code there? If so how to call this method ? Or are you suggesting to use this in helper? Sorry I am new to Lightning, so things are messed up!
    – Nayana
    May 27, 2015 at 6:25
  • It gets called automatically. So yea just put this in there.
    – Kris Gray
    May 27, 2015 at 12:32
  • @KrisGray are you sure you can do this var ul = document.createElement("ul");..element.appendChild(ul); when Locker Service is enabled? Aug 26, 2016 at 12:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.