function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Chaminga DissanayakeChaminga Dissanayake 

Iterating Complex Map in Lightning

I'm working a lightning component, which has a requirement of displaying a dynamic table.

For that, I need to iterate over a map (Map>) and display the values.

So, How can I retrieve map from apex controller and display values/key on the component ?

Apex Controller method signature –
public static Map<Id, Map<String, String>> getDataCollectionTableValues(Id dataCollectionId){
Apex method return value –
{  
   a0E0k000003aEKUEA2=   {  
      Field_10__c=test1,
      Field_1__c=test2,
      Field_2__c=test3,
      Field_3__c=test6,
      Field_4__c=null,
      Field_5__c=null,
      Field_6__c=test7,
      Field_7__c=null,
      Field_8__c=null,
      Field_9__c=test,
      ...
   }
}
Lightning helper – I’ve passed id parameter to controller method and set response to the map attribute.
 
({
    loadDataCollection: function(component) {

        var action = component.get("c.getDataCollectionTableValues");
        action.setParams({
            dataCollectionId : component.get("v.recordId")
        });

        action.setCallback(this, function(response)
        {
            var state = response.getState();
            if (state === "SUCCESS")
            {
                component.set("v.dataCollectionRecords", response.getReturnValue());
                 console.debug(response.getReturnValue());
            }else
            {
                console.debug(response.error[0].message);
            }
        });
        $A.enqueueAction(action);
    }
})

Component –
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" controller="DataCollectionTableController">
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="dataCollection" type="Data_Collection__c" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="dataCollectionRecords" type="Map"/>
    <aura:iteration items="{!v.dataCollectionRecords}" var="dcrRecord" indexVar="key">
        {!key}
        {!dcrRecord.key}
    </aura:iteration>

</aura:component>



 
Raj VakatiRaj Vakati

Use the code like this 
<aura:iteration items="{!myMap}" indexVar="key" var="item">
      {!myMap[key]}
</aura:iteration>


 
jane1234jane1234
IF YOU ARE HAVING TOO MANY MAPS TO GET THE TABLE DATA IN.
i WOULD ADVISE TO THE WRAPPER LIST AND DISPLAY THE LIST IN LIGHTNING
Chaminga DissanayakeChaminga Dissanayake
@Raj V I'm getting following error.

Failed to save DataCollectionTable.cmp: expecting a positive integer, found 'key' at column 23 of expression: dataCollectionRecords[key]: Source
Chaminga DissanayakeChaminga Dissanayake
@seethal pius
The table is dynamic, including columns. Therefore i have to use a map.
jane1234jane1234
WRAPPER LIST ALSO CAN BE USED AS DYNAMIC 
farukh sk hdfarukh sk hd
Basically there are two ways two use map in lightning component,

First by putting value in map using controller and displaying it in lightning component simply by using {!v.map.key} and second by iterating over map using aura iteration.
 
This will help on this,

https://www.sfdc-lightning.com/2018/09/how-to-use-map-in-lightning-component.html
Nida Shaikh 17Nida Shaikh 17
Hello @jane1234 how to create a wrapper from map of map