Iterate over two lists in Aura component to display active number of steps

Question

I am building an aura lightning component that displays a timeline. I have two lists, one that returns all the steps in the timeline, and the second list that returns the current active number of steps in the timeline. I am iterating over the first list to display all the steps in the timeline, which works correctly. With the second list I'm trying to implement which steps are active based on the number of elements in the list. For example, if the first list contains 12 elements (total number of steps) and the second list contains 5 elements (total number of active steps) then I'd like to alter the variant of the icon to display as successful. Is there a way to iterate over that second list to change the variant to success for the number of current steps out of the total number of steps that is being iterated over?

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="TimelineController" access="global" >
    <aura:attribute name="recordId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="steps" type="List" />
    <aura:attribute name="currentSteps" type="List" />
    
    <table class="slds-table slds-table_cell-buffer slds-table_fixed-layout slds-table_bordered slds-table_col-bordered">        
        <thead>
            <tr class="slds-line-height_reset slds-text-title--caps">
                <aura:iteration items="{!v.steps}" var="step">
                    <th scope="col">
                        <div class="slds-truncate" title="{!step}">{!step}</div>
                    </th>
                </aura:iteration>
            </tr>
        </thead>
        <tbody>        
            <tr class="slds-hint-parent">
                <aura:iteration items="{!v.steps}" var="step">
                    <td>
                        <div class="slds-truncate">lightning:icon iconName="action:approval" /></div>
                    </td>
                </aura:iteration>
            </tr> 
        </tbody>
    </table>
    
</aura:component>

Answer 1

You'd need to iterate this list in the controller/helper to check which items are active. That's because within the loop, one iterator can't see the other iterator (unless

So you'd have your two lists:

<aura:attribute name="steps" type="List" />
<aura:attribute name="currentSteps" type="List" />

You might be able to use these, but you also could make a third list that has objects in it:

<aura:attribute name="stepsWithStatus" type="List" />

Then grab the two lists and iterate:

let steps = component.get("v.steps");
let currentSteps = component.get("v.currentSteps");
let stepsWithStatus = [];

steps.forEach( step => {
  let stepWithStatus = {name:step,active:false};
  if (currentSteps.find( currentStep => currentStep === step)){
    stepWithStatus.active = true;
  }
  stepsWithStatus.push(stepWithStatus);
});

component.set("v.stepsWithStatus",stepsWithStatus);

Now, loop the stepsWithStatus list in the ui.

<tr class="slds-hint-parent">
    <aura:iteration items="{!v.stepsWithStatus}" var="stepWithStatus">
        <td>
            <aura:if isTrue="{!stepWithStatus eq true}">
              <div class="slds-truncate">lightning:icon iconName="action:approval" /></div>
            </aura:if>
            
            <aura:if isTrue="{!stepWithStatus neq true}">
              <div class="slds-truncate">lightning:icon iconName="action:somethingelse" /></div>
            </aura:if>
            
        </td>
    </aura:iteration>
</tr>