0

i have two lists: 1 is id list, the second is names list. both have the same amount of values. i want to iterate over those two lists using an index, and create tabs.

i dont know how to access the lists using index.

The code is an idea of what i want to implement, i know its incorrect syntax wise, i just dont know how to write it:

<aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable,force:hasSObjectName">
        <aura:attribute name="reportIdsList" type="String[]" />
        <aura:attribute name="reportNamesList" type="String[]" />

        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
       <lightning:tabset class="slds-tabs_card slds-tabs_default">
           <aura:if isTrue="{!v.reportIdsList != null}">

                <aura:iteration items="{!v.reportIdsList}" var="item" indexVar="index">                         
                    <lightning:tab class="slds-tabs_default__item">
                        <aura:set attribute="label"> 
                        {!v.reportNamesList[index]]}
                        </aura:set>
                        <iframe src="https://varonis--dev.lightning.force.com/apex/PowerBIReportA?repId={!v.reportIdsList[index]}" width="100%" height="900" style="overflow: hidden;"/>

                    </lightning:tab>
                </aura:iteration>

            </aura:if>
    </lightning:tabset>   
</aura:component>
Improve this question
1
  • I intended to nominate this for re-opening (not re-open it but ah well) on the grounds that the suggested duplicate answer didn't provide an answer, just that you can't use a variable as an index. With the OP's parallel lists case, Manjot's answer is closer to the mark in my view. Commented Jan 30, 2018 at 17:02

1 Answer 1

Reset to default
2

We cannot iterate on list using v.attributeName[index] in aura:iteration. Workarourd for above is 

    transformData : function transformData(component){
         var reportIdsList = component.get('v.reportIdsList');
         var reportNamesList = component.get('reportNamesList');
         var transformedData = [];
         for(var i=0; i< reportIdsList.length; i=i+1){
             tranformedData.push({
                  id : reportIdsList[i],
                  name: reportNamesList[i] 
             });
         }
         component.set('v.transformedData', transformedData);
    }

then in aura:iteration

    <aura:iteration items="{! v.transformedData}" var="data" indexVar="index">                         
                        <lightning:tab class="slds-tabs_default__item">
                            <aura:set attribute="label"> 
                            {!data.name}
                            </aura:set>
                            <iframe src="https://varonis--dev.lightning.force.com/apex/PowerBIReportA?repId={!data.id}" width="100%" height="900" style="overflow: hidden;"/>

   </lightning:tab>
</aura:iteration>
Improve this answer
8
  • This is a workaround, but the question here also is - is this requirement possible to achieve? Commented Jan 31, 2018 at 7:22
  • @ItaiShmida I did not think there is any way to simultaneously iterate over 2 list in aura:iteration. Commented Jan 31, 2018 at 7:31
  • So the answer to the question is: it is not possible to achieve, and there is a workaround - to do it like you have suggested Commented Jan 31, 2018 at 7:36
  • ok I will edit it .. Commented Jan 31, 2018 at 8:50
  • @ManjotSingh what is the data type of transformedData? Commented Jan 31, 2018 at 9:39

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.