How to access map or object elements dynamically in Lightning?

In VisualForce we could access dynamically to map elements using syntax

{!map[mapIndex]}

In Lightning if we try to define a map and use this syntax we would receive an error saying

Failed to save undefined: expecting a positive integer, found
‘mapIndex’ at column 9 of expression: (v.map[mapIndex]) : Source

Which means that Lightning doesn’t understand how to process maps and objects dynamically in Javascript. However, in pure javascript it is not a problem to access map or object member dynamically.

Is there any way to avoid this restriction?

Update: I am looking for some solution which wouldn’t require javascript.
I am looking for solution which would use only native syntax of Lightning Component.

Answer

Ok, I think I have got the closest solution so far.

What you can do is create a custom value provider, which, whilst it means you need to define some Javascript to process a Map, you only need to do this once and can pass any Map to it to iterate.

It’s not the same as the old Apex version, but it works and is probably more customizable (for example, you could output both keys and values together)

Component code:

<aura:application extends="force:slds" >
  <aura:attribute name="providersAdded" default="false" type="Boolean" />
  <aura:handler name="init" value="{!this}" action="{!c.init}" />
  <aura:attribute name="mymap" type="Map" default="{'name':'France','capital':'Paris'}"/>    

  <aura:if isTrue="{!v.providersAdded}">
  <!--Note the use of the special value provider that allows Map iteration-->
  <aura:iteration items="{!i.mymap}" var="value">
      <div >{!value}</div>
      <!--France-->
      <!--Paris-->
  </aura:iteration>
  </aura:if>
</aura:application>

Controller.js:

init: function(component, event, helper) {
  component.addValueProvider(
      'i',
      {
          get: function(key, comp) {
              let localMap = component.get("v."+key); 
              return Object.keys(localMap).map(key => localMap[key]);
          },
      }
  );
}

Attribution
Source : Link , Question Author : Patlatus , Answer Author : Caspar Harmer

Leave a Comment