How to use map datatype in salesforce lightning component

Hey guys, today in this post we are going to learn that how we can use map datatype aura attribute in salesforce lightning component.

Prerequisites : basic understanding of Lightning Component and apex programming

  • 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.

  • 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 }



map datatype output image

Check Also : Iterate Map values in Salesforce Lightning Component.

Bravo!!   🙂

(Visited 25,293 times, 1 visits today)

9 thoughts on “How to use map datatype in salesforce lightning component”

    • Hi Igor,

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

      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]).

  1. 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 {
    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}

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

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


Leave a Comment