use map

How to use map datatype in salesforce lightning component

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
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 datatype output image

Check Also : Iterate Map values in Salesforce Lightning Component.

Bravo!!   🙂

(Visited 24,348 times, 1 visits today)

9 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