use map

How to use Map in lightning Component

Lightning Component

Sharing is caring!

Prerequisites : basic understanding of Lightning Component and apex programming
MyMapController.apxc

  • First we create our component controller class.
  • In this apex class we have a @AuraEnabled getMyMap() method which return type is Map type.
  • In this method first we created a new map called Mymap and put value on it . (‘key’ , ‘value’) and return the map.
MapComponent.cmp

  • Next we create our lightning component.
  • On the component initialize we call doInit js function and set the return value in myMap aura:attribute .
  • And we can access map attribute  value in component by using this syntax -:

{! v.MapAttributeName.keyName }

MapComponentController.js

TestApp.app

Output-:

map-value output image

Check Also : Iterate Map values in Salesforce Lightning Component.

Bravo!!   🙂

Sharing is caring!

(Visited 6,074 times, 1 visits today)

6 comments

    • Hi Igor,

      You can try this way: component.get(“v.sectionLabels”)[‘a’];
      Or

      for(var item in mapData){
      if(item == Country){
      component.set(“v.cities”, mapData[item] );
      }
      }
      where mapData is the Map attribute, it iterates the all keys in map and if the key matches the key you are searching, then get the data using (mapData[item]).

  • Hello,

     

    How can I pass keyName in {! v.MapAttributeName.keyName } dynamically and get the value ?

     

    Thanks.

  • Hello MB,

    You can access the map dynamically in component. For that purpose, you need to perform some logic in controller.js, I got the code snippet from stackoverflow, would be glad if it can help you.

    Apex Class:-
    public class LightningController {
    @AuraEnabled
    public static Map fetchMapData() {
    Map mapCustomer = new Map ();
    mapCustomer.put(‘Sample’, ‘Value’);
    mapCustomer.put(‘Sample1’, ‘Value1’);
    mapCustomer.put(‘Sample2’, ‘Value2’);
    mapCustomer.put(‘Sample3’, ‘Value3’);
    return mapCustomer;
    }
    }

    Lightning Component:-

    {!cus.key} – {!cus.value}

    Controller:-
    ({
    fetch : function(component, event, helper) {
    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);
    }
    });
    $A.enqueueAction(action);
    }
    })

  • Lightning Component:-
    <aura:component     implements=”force:appHostable,flexipage:availableForAllPageTypes”  access=”global” controller=”LightningController”>
    <ui:button label=”Fetch” press=”{!c.fetch}”/>
    <br/><br/>
    <aura:attribute name=”customers” type=”List” />
    <aura:iteration items=”{!v.customers}” var=”cus” indexVar=”key”>
    {!cus.key} – {!cus.value}<br/><br/>
    </aura:iteration>
    </aura:component>

Leave a Reply