Accessing Map Value in Lightning Component

Question

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)

Answer 1

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.

Answer 2

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.

Answer 3

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'];