Need to iterate 2values inside single aura:iteration

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.

v.opportunityStages

v.opportunityPath

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


)


3 Answers
3

each variable within your opportunityStages collection was declared as item,

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

!item.opportunityPath

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>


opportunityPath

aura:iteration

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

Map

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



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.