Aura component get map value using dynamic key

Question

From my understanding of javascript, I should be able to query for map value using key using following code:

consts = {'key' : 'value'};
var stringKey = 'key';
var something = consts[stringKey];

However, when I try to use similar way of querying within an aura component to apply dynamic style for my button colour in the code below, I get an error.

Code:

<aura:iteration items="{!v.myObjs }" var="obj">
    <aura:iteration items="{!obj.myItems }" var="objItem">
        <div class="slds-col slds-small-size_12-of-12 slds-medium-size_6-of-12">
            <button class="slds-button slds-button_neutral" style="{!'color:' + obj.btnColour[objItem.MyName__c]}" onclick="{!c.showFlow}" id="{!objItem.MyName__c}">{!objItem.MyText__c}</button>
        </div>
    </aura:iteration>
</aura:iteration>

Error:

FIELD_INTEGRITY_EXCEPTION - expecting a positive integer, found 'objItem' at column xx of expression: 'color:' + obj.btnColour[objItem.MyName__c]: Source

Am I doing anything wrong? I verified, I have my object correctly setup and it contains data as expected.

Answer 1

Am I doing anything wrong?

Yes.

Simply, while JavaScript supports this syntax, "Aura Expressions" do not.

You need to mix the data together such that you can resolve it without using the "dynamic" notation, which means copying the value in a way that you can access it directly from obj.

Without seeing your code, it's hard to make a specific recommendation, but you'll need to restructure your data.