How to iterate over map in Salesforce Lightning Component? [duplicate]

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 {
    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');
        return mapCustomer;


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" controller="LightningController">
    <ui:button label="Fetch" press="{!c.fetch}"/>
    <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/>


 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);


Source : Link , Question Author : Sharan Desai , Answer Author : Tushar Sharma

Leave a Comment