2

I've been trying to access map values in Lightning Components, but haven't been able to be successful.

I've searched the documentation, articles, this forum, etc and the answer seems to be that there isn't a way to do it via the value provider {!v.} in the markup. Meaning, the only way is via the JS controller.

Editing this question for clarity: my goal is to confirm whether or not there is indeed no way of currently accessing map values in lightning component markup.

I've checked the the map that I have contains the data I expect (see below). There is only one map key at the moment and it's an opportunity ID.

{"0060x0000061FU0AAM":[{"Id":"0060x0000061FU5AAM","AccountId":"0014100000gZs1IAAS","Name":"Closed Renewal Lookup - Test","StageName":"Renewed","Amount":1234,"CloseDate":"2018-08-21","OwnerId":"00541000001TeSwAAK","Owner":{"Name":"F","Id":"00541000001TeSwAAK"}},{"Id":"0060x0000061FUAAA2","AccountId":"0014100000gZs1IAAS","Name":"Closed NB Lookup - Test","StageName":"Deal Won","Amount":1234,"CloseDate":"2018-08-01","OwnerId":"00541000001TeSwAAK","Owner":{"Name":"F","Id":"00541000001TeSwAAK"}}]}

Here's what I've tried and nothing has been successful.

{!v.map.key} (tried this with iteration component)

FIELD_INTEGRITY_EXCEPTION
Failed to save openRenewals.cmp: unexpected token: '.0060' at column 17 of expression: v.allRelatedOpps.0060x0000061FU0AAM: Source

{!v.map[key]} (tried this with iteration component)

FIELD_INTEGRITY_EXCEPTION
Failed to save openRenewals.cmp: expecting a right square bracket, found 'x0000061FU0AAM' at column 22 of expression: v.allRelatedOpps[0060x0000061FU0AAM]: Source

{!v.map[0]} (saves but doesn't work)

{!v.map[0].Name} (saves but doesn't work)

{!v.map[0][0].Name} (to get the name of the first item in the first map entry)

  • Perhaps you should be more specific here e.g. ask "why isn't it possible". If there was a clear explanation we might all feel a bit better when we run into this problem. – Keith C Aug 7 '18 at 19:43
  • what exactly are you trying to do in the UI? Iterate through a list? Enable a button click to a specific record or object? – Jason Benkert Aug 7 '18 at 19:45
  • 3
    The actual answer to your question is "No, this cannot be done in Lightning". It is particularly frustrating when, for example, you want to refer to fields dynamically. For example {!v.myRecord[myFieldName]} is not an allowed expression. If you post your use case here we can try to figure out an alternative. – Sebastian Kessel Aug 7 '18 at 21:03
  • I am confused... you said "answer seems to be that there isn't a way to do it via the value provider {!v.} in the markup. Meaning, the only way is via the JS controller." So you already know that it is not possible via markup, and yet your question is all about how to do it via markup. Are you looking for a way to do it via JS? – Lightning Evangelist Aug 8 '18 at 1:02
  • @Kal - since you don't know what you don't know, my goal was to confirm with the community whether me not being able to find a solution was due to there in fact not being a way to access map values in markup or me missing something for some reason since I'm new at this. – fdc Aug 8 '18 at 1:26
2

So it is indeed the case, you can't do this in Lightning expressions.

Solving the issue really depends on your use case. The most common simply is, you have a map and you want to be able to iterate through it and use both the keys and values. The best way to handle this is just to transform it in the JS controller into a flat list of wrappers, so that in your aura:iteration you can access {!item.key} and {!item.value}.

If you need to look up one key in many maps to display certain values, maybe you can create another component that pulls values from maps. The component would use JS to pull the value, but then any component of yours can invoke that one without further use of JS.

The solution may need to be more creative if your use doesn't fit into those boxes.

0

As for your question:

my goal is to confirm whether or not there is indeed no way of currently accessing map values in lightning component markup.

There is a limited way to access map values in the component using value provider. However, that's not dynamic, i.e., you cannot iterate over a map and substitute the key dynamically, rather you need to know the key upfront and that it has to be hard-coded.

As an example:

<aura:attribute name="myMap" type="Map" default="{ 'a': 'Value1', 'b': 'Value2', 'c': 'Value3' }" />

{!v.myMap.a} <!-- prints Value1 -->
{!v.myMap.b} <!-- prints Value2 -->
{!v.myMap.c} <!-- prints Value3 -->

Note: Based on observation, this approach is only limited to string literals. E.g., if the keys are changed to any numeric values (say '1', '2', etc.), it fails to save the component at first place.

  • Thank you. I tried this method however and it didn't work for me (see first example in my post). Do you think it could it be because I have a map of type: <Id, List<Opportunity>> rather than a simpler <Id, Opportunity>? – fdc Aug 8 '18 at 3:45
  • It does look like that this approach only works on string literals. Because the Ids start with a number, it fails to save the component that time. E.g., if you change the keys in the above example to say 1, 2, .., it does not work. Whereas if you keep anything as say a1, b1.., etc. it works fine. – Jayant Das Aug 8 '18 at 12:42
-1

I hope this will work for you. I have successfully accessing Map Value using this solution in this scenario. Apex Code:

@AuraEnabled public static Map SampleclassName(){
return sample.otherClass(); }

So in the return of this class is Map in the Lightning controller:

  • var resMap = a.getReturnValue(); Then access map value like this: resMap['GetKey'];
-1

I hope this will work for you. I have successfully accessing Map Value using this solution in this scenario. Apex Code:

public class SampleMapController {
  @AuraEnabled
 public static Map<String,String> getMapValues(){
   Map<String,String> sampleMap = new Map<String,String>();
    Mymap.put('getMapkey1','Dummy 1');
    Mymap.put('getMapkey2','Dummy 2');
   return sampleMap;
  }
}

To access Map values in your controller:

  var resMap = a.getReturnValue(); 

Get Map value:

 resMap['getMapkey1'];

OR Like this:

var resMap = a.getReturnValue(); 
component.set('v.getMapVal',resMap);

Then create an attribute to the component then get Map values:

  <aura:attribute name="getMapVal" type="Map" />

 <p> The First Map value is {!v.getMapVal.getMapkey1} </p>

I hope this will helps. Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.