2

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. enter image description here. 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);

}
})
1

each variable within your opportunityStages collection was declared as item,

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

  • I tried this logic but no success. – Aruna Aug 23 '18 at 5:39
  • you might want to update your post with how you are trying and what isint working – glls Aug 23 '18 at 5:40
1

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>
  • This solution won't work. – Aruna Aug 23 '18 at 5:38
  • @Aruna are you facing any issue. Please explain a bit. – Tushar Sharma Aug 23 '18 at 5:40
  • I have updated my question, please take a look – Aruna Aug 23 '18 at 6:34
  • @Aruna opportunityPath is a list so you need aura:iteration to iterate it. You can't directly access it. – Tushar Sharma Aug 23 '18 at 6:47
  • I have a tag '<li>' for which I am applying style and then displaying a dynamic data inside that tag. How can I do that with 2iteration sets? It will spoil the logic right? – Aruna Aug 23 '18 at 6:59
1

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);
}
  • Its not working for me – Aruna Aug 23 '18 at 5:38
  • Are you getting any errors? – itzmukeshy7 Aug 23 '18 at 5:39
  • the page is loading without the iteration part. – Aruna Aug 23 '18 at 5:40
  • Can you share the updated code, what you are trying now? – itzmukeshy7 Aug 23 '18 at 5:41
  • I have added my updated code below as answer, Plz check that – Aruna Aug 23 '18 at 5:47

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.