How to iterate over map in Salesforce Lightning Component?

  • I have a aura map attribute defined in my component file as below

    < aura:attribute name="FilesNameMap" type="Map" />
    

    But i am not able to understand how to iterate this in the component file as we know that the <aura:iteration> will work on List but not for Map.

    Below is the code which i tried to iterate the Map but couldn't succeed.

    < aura:iteration items="{!v.FilesNameMap}" indexVar="key" var="item" > //- logic
    </ aura:iteration >
    
  • You can't directly iterate over map. You need to do something like

    Apex Class:

    public class LightningController {
        @AuraEnabled
        public static Map < String, String > fetchMapData() {
            Map < String, String > mapCustomer = new Map < String, String >();
            mapCustomer.put('Sample', 'Value');
            mapCustomer.put('Sample1', 'Value1');
            mapCustomer.put('Sample2', 'Value2');
            mapCustomer.put('Sample3', 'Value3');
            system.debug(mapCustomer);         
            return mapCustomer;
        }
    }
    

    Component:

    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" controller="LightningController">
        <ui:button label="Fetch" press="{!c.fetch}"/>
        <br/><br/>
        <aura:attribute name="showBool" type="Boolean" default="false"/>
        <aura:attribute name="customers" type="List" />
        <aura:renderIf isTrue="{!v.showBool}">
            <aura:iteration items="{!v.customers}" var="cus" indexVar="key">
                {!cus.key} - {!cus.value}<br/><br/>
            </aura:iteration>
        </aura:renderIf>
    </aura:component>
    

    Controller:

    ({
     fetch : function(component, event, helper) {
            var custNo = component.get("v.custNo");
      var action = component.get("c.fetchMapData");   
            action.setCallback(this, function(response) {
                var state = response.getState();
                if (state === "SUCCESS") {                
                    var custs = [];
                    var conts = response.getReturnValue();
                    for(var key in conts){
                        custs.push({value:conts[key], key:key});
                    }
                    component.set("v.customers", custs);
                    component.set("v.showBool", true);
                } 
      });           
            $A.enqueueAction(action);
     }
    })
    

    Reference

    Hello Tushar, I tried to run this example but getting but getting "Error in $A.getCallback() [key is not defined]" error

    @ArpitSethi it would be better if you post a new question with your code sample. It will help to identify problem.

    Hello Tushar, I got the issue, actually its just because of -- for ( key in conts ), instead it should be -- for ( var key in conts )... Thanks

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used