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.
    – Keith C
    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?
    – Itai Shmida
    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.
    – Manjot Singh
    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
    – Itai Shmida
    Commented Jan 31, 2018 at 7:36
  • ok I will edit it ..
    – Manjot Singh
    Commented Jan 31, 2018 at 8:50
  • @ManjotSingh what is the data type of transformedData?
    – Dana Griff
    Commented Jan 31, 2018 at 9:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .