Dfyjkt

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);


)

each variable within your opportunityStages collection was declared as item,

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

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>

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();
 )
 component.set('v.opportunityStateNPath', opportunityStateNPath);

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