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>
  • 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 Jan 30 '18 at 17:02
1

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"> 
                            {!v.data.name}
                            </aura:set>
                            <iframe src="https://varonis--dev.lightning.force.com/apex/PowerBIReportA?repId={!v.data.id}" width="100%" height="900" style="overflow: hidden;"/>

   </lightning:tab>
</aura:iteration>
  • This is a workaround, but the question here also is - is this requirement possible to achieve? – Itai Shmida Jan 31 '18 at 7:22
  • @ItaiShmida I did not think there is any way to simultaneously iterate over 2 list in aura:iteration. – Manjot Singh Jan 31 '18 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 Jan 31 '18 at 7:36
  • ok I will edit it .. – Manjot Singh Jan 31 '18 at 8:50
  • @ManjotSingh what is the data type of transformedData? – Dana Griff Jan 31 '18 at 9:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.