Need to iterate 2values inside single aura:iteration

Question

I want to iterate 2values inside a single aura:iteration. But I am not able to do so. Can ayone help me in this. I am able to get value for "v.opportunityStages" but for "v.opportunityPath" nothing is coming. My JSON response is below. . I have given below my code.

Method 1: My component code :

<aura:attribute name="opportunityStages" type="List" />
<aura:attribute name="opportunityPath" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name = "opportunityStagePath" type="Object" default=""/>
<aura:iteration items="{!v.opportunityStages}" var="item">
    <li class="{! 'slds-path__item ' + (opportunityPath)}" role="presentation">
    <a aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="0">
         <p> {!item}</p>
    </a>
    </li>
</aura:iteration>

My Controller JS

doInit: function(component, event, helper)
{
       var dto = {"opportunityId" : '0064E000007QBNg'};
       var action = component.get("c.searchOpportunity");
           action.setParams({
           "opportunityDto": JSON.stringify(dto)
       });
       action.setCallback(this, function(response) {
       if (state === "SUCCESS") {
          try {
               var result = JSON.parse(response.getReturnValue());
               alert(" unparsed json : +response.getReturnValue());
               component.set('v.opportunityStages',result.opportunityStage);
               component.set('v.opportunityPath',result.opportunityPath);
               } catch(e) {
                   helper.handleJSException(component,response);
               }
           } else {
               helper.handleAuraException(component,response);
           }
       });
               $A.enqueueAction(action);
}

Along with the above method, I tried one more way

Method 2: Component Code:

     <aura:attribute name = "opportunityStagePath" type="Object" default=""/>
     <aura:iteration items="{!v.opportunityStagePath}" var="item">
     <li class="{! 'slds-path__item ' + (item.opportunityPath)}" role="presentation">
      <a aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="0">
          <p> {!item.opportunityStage}</p>
    </a>
    </li>
</aura:iteration>

Controller Code

  action.setCallback(this, function(response) {

           var state = response.getState();
           if (state === "SUCCESS") {
           try {
               var result = JSON.parse(response.getReturnValue());
               component.set('v.opportunityStagePath',result);
             })
                   } catch(e) {
                   helper.handleJSException(component,response);
               }
           } 
       });

---

@itzmukeshy7, My updated code as per your idea:

My component

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="opportunityStages" type="List" />
<aura:attribute name="opportunityPath" type="List" />
<aura:attribute name = "opportunityStagePath" type="Object" default=""/>
<aura:attribute name = "opportunityStageNPath" type="List" default="" />
<div class="slds-path">
    <div class="slds-grid slds-path__track">
        <div class="slds-grid slds-path__scroller-container">
            <div class="slds-path__scroller" role="application">
                <div class="slds-path__scroller_inner">
                    <ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
                        <aura:iteration items="{!v.opportunityStageNPath}" var="opportunity">
                            <li class="slds-path__item slds-is-won" role="presentation">

                                <a aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="0">


                                    <p> {!opportunity.stage}</p>

                                </a>
                            </li>
                        </aura:iteration>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

My Controller

({doInit: function(component, event, helper)
{
     var dto = {"opportunityId" : '0064E000007QBNg'};
           var action = component.get("c.searchOpportunity");
               action.setParams({
               "opportunityDto": JSON.stringify(dto)
           });

           action.setCallback(this, function(response) {

               var state = response.getState();
               if (state === "SUCCESS") {
alert("state : "+state);
                   try {
                       var result = JSON.parse(response.getReturnValue());

                 component.set('v.opportunityStages',result.opportunityStage);
                       component.set('v.opportunityPath',result.opportunityPath);
                       /* create list of opportunity stages and paths */
        var opportunityStateNPath = [];
        result.opportunityStage.forEach(function (stage, index) {
          opportunityStateNPath.push({ stage: stage, path: result.opportunityPath[index] });
        })
        component.set('v.opportunityStateNPath', opportunityStateNPath);

                   } catch(e) {
                       helper.handleJSException(component,response);
                   }
               } else {alert("state : "+state);
                   helper.handleAuraException(component,response);
               }

           });

           $A.enqueueAction(action);

}
})

Answer 1

each variable within your opportunityStages collection was declared as item,

so your approach should be {!item.opportunityPath} to access it in your iteration.

Answer 2

Here you can create a wrapper for both List and then pass that wrapper list in Lightning.

Then you can refer both list simultaneously.

<aura:iteration items="{!v.opportunitywrapper}" var="item">
   <aura:iteration items="{!item.opportunityPath}" var="item1">


   </aura:iteration>
   <aura:iteration items="{!item.opportunityStages}" var="item2">


   </aura:iteration>

</aura:iteration>

Answer 3

Actually, we can do that, here you can take help of Map like:

Component code

<aura:attribute name="opportunityStages" type="List" />
<aura:attribute name="opportunityPath" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name = "opportunityStagePath" type="Object" default="" />
<aura:attribute name = "opportunityStageNPath" type="List" default="" />


<aura:iteration items="{!v.opportunityStageNPath}" var="opportunity">
    <li class="{!'slds-path__item ' + (equals(opportunity.path, 'Proposition/Nego') ? 'slds-is-active' : 'slds-is-incomplete')}" role="presentation">
        <a aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="0">
            <p> {!opportunity.stage}</p>
        </a>
    </li>
</aura:iteration>

JS Controller logic

doInit: function(component, event, helper) {
  var dto = { "opportunityId": '0064E000007QBNg' };
  var action = component.get("c.searchOpportunity");
  action.setParams({
    "opportunityDto": JSON.stringify(dto)
  });
  action.setCallback(this, function (response) {
    if (state === "SUCCESS") {
      try {
        var result = JSON.parse(response.getReturnValue());
        alert(response.getReturnValue());
        component.set('v.opportunityStages', result.opportunityStage);
        component.set('v.opportunityPath', result.opportunityPath);

        /* create list of opportunity stages and paths */
        var opportunityStateNPath = [];
        result.opportunityStage.forEach(function (stage, index) {
          opportunityStateNPath.push({ stage: stage, path: (result.opportunityPath[index] || '') });
        })
        component.set('v.opportunityStateNPath', opportunityStateNPath);

      } catch (e) {
        helper.handleJSException(component, response);
      }
    } else {
      helper.handleAuraException(component, response);
    }
  });
  $A.enqueueAction(action);
}