function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sagar MadkaikarSagar Madkaikar 

How to access value from a MAP in lightning component?

Hi I have a following lightning component code.
============My Component =============
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="MyClass">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="myMap" type="Map" />
</aura:component>
======================================

The map 'myMap' is loaded with some data through the controller.
Im not getting how will I access the value from the map "myMap" inside the component.

I dont want to iterate over the map
Just need to access a value from It something like myMap.get('Key1') inside the component;

=========MyComponentController==========
({
   doInit: function(component, event, helper) {      

       var action = component.get('c.getMap');
        
        action.setCallback(this,function(result){
            component.set('v.myMap',result.getReturnValue());
        });
        $A.enqueueAction(action);
     }
})
============================

==========MyClass=============
public with sharing class MyClass
{
      public static MAP<String,String> getMap()
      {
          Map<String,String> map = new Map<String,String>();
          map.put('key1','value1');
          map.put('key2','value2');
          return map;
      }
}
=================================
sfdcMonkey.comsfdcMonkey.com
hi Sagar Madkaikar
here is a simple example to use map in lightning component and use @AuraEnabled in you apex class method
component 
<aura:component controller="MyMapClass">
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="myMap" type="Map" />
    {!v.myMap.key1} <br/>
    {!v.myMap.key2}
</aura:component>
jscontroller 
({
	doInit: function(component, event, helper) {      

       var action = component.get('c.getMyMap');
        
        action.setCallback(this,function(response){
            alert(JSON.stringify(response.getReturnValue()));
            component.set('v.myMap',response.getReturnValue());
        });
        $A.enqueueAction(action);
     }
})

apex class 
public class MyMapClass {
   @AuraEnabled
    public static map<String,String> getMyMap(){
        Map<String,String> Mymap = new Map<String,String>();
          Mymap.put('key1','apple');
          Mymap.put('key2','mango');
          return Mymap;
      }
}
these code show
Apple
Mango
in your component screen
I hop it helps you if it helps you Mark it best answer so it make proper solution for other
Thanks :)

 
Sagar MadkaikarSagar Madkaikar
Hi Piyush,

Thank you for your solution.

It works when I am using  {!v.myMap.key1}.

I want further to use the Key part dynamically from the map.
======================================================
<aura:component controller="MyMapClass">
      <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
      <aura:attribute name="myMap" type="Map" />
      <aura:attribute name="myList" type="List" />

      <aura:iteration items="{!v.myList}" var="myVar">
                        <li >                           
                                {!v.myMap.myVar.Name}            //    -----          Can I use Something like this??? 
                        </li>
                    </aura:iteration>
 </aura:component>
===============================================================================
Where myList is a List of 'Topic' Object having the field 'Name'.

Whatever present in the Name field, I want to use it as a Key in the Map.

Thanks :)
sfdcMonkey.comsfdcMonkey.com
no as per my understaning its not possible
but you can iterate a map values on <aura:iteration> go to below link
http://www.sfdcmonkey.com/2017/01/13/iterate-map-values-lightning-component/
i hop it helps you let me inform if it helps you
Thanks
 
silpa garikapatisilpa garikapati
Hi,
How to iterate map  in lightning component. And how display values by iterating map in lightning component?
 
farukh sk hdfarukh sk hd
Basically there are two ways two use map in lightning component,

First as mentioned by above 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
Zachary CohanZachary Cohan

So, we either have to iterate over it.... Or hardcode the values?! Those are the only solutions?
What is the point of even supporting maps if we cant use the keys dynamically.

That is such a fundamental design flaw.