8

This question already has an answer here:

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 >

marked as duplicate by Raul, Dave Humm, Gortonington, Samuel Dare, battery.cord Oct 18 '17 at 13:21

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

14

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 – Arpit Sethi Jul 24 '17 at 16:06
  • @ArpitSethi it would be better if you post a new question with your code sample. It will help to identify problem. – Tushar Sharma Jul 25 '17 at 9:44
  • 3
    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 – Arpit Sethi Jul 25 '17 at 13:04

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