Lightning: dynamic index in aura attribute with type List

Question

related post

I am having the same issue. Trying to access array with dynamic index arrayList[index] (index from aura:iteration), but Salesforce doesn't support that.

Does anyone know how to do this?

Peace of code:

<aura:attribute name="iterList"             type="List" />
<aura:attribute name="phones"               type="String[]" />



<aura:iteration items="{! v.iterList }" var="val" indexVar="index">
    //some code here

            <ui:inputPhone label="{! v.labelName }" aura:id="phone" value="{! v.phones[index] }" class="form-control"/> 

   //some code here
</aura:iteration>

Error:

Result: [ERROR]: expecting a positive integer, found 'index' at column 11 of expression: v.phones[index]

Answer 1

I needed something similar so I used HTML input components instead of Ui:input components and used the data-selected-Index attribute for storing the index value

Answer 2

The easiest option is to create a component to display data within your iteration that would display whatever data you want.

Answer 3

You can manipulate the incoming json stored in the attribute iterList. Since in the attribute Phones, you have related values at the same index, you can add the phone value to the iterList attribute by creating a key value pair in the json.

For example, lets say your iterList structure is: [{"Name":"John","Age":"26"},{"Name":"Marie","Age":"21"},.......]

And your phones attribute is: ["12345678","87654532","98232233",...].

Then, we can write the following code to map the phones to the corresponding value in iterList:

var iterList=component.get("v.iterList");
var phones=component.get("v.phones");
for(var i in iterList){
    iterList[i]["Phone"]=phones[i];
}
component.set("v.iterList",iterList);

Now, you will have to modify your cmp file code as follows:

<aura:iteration items="{! v.iterList }" var="val" indexVar="index">
    //some code here

<ui:inputPhone label="{! v.labelName }" aura:id="phone" value="{!val.Phone}" class="form-control"/> 

   //some code here
</aura:iteration>