0

I am not able to use nested aura:iteration in my lightning component. Please see my lightning component code below. But, I am able to use the nested array directly by using indexing which you can see in 6th line code.

<aura:component controller="TestUtilPoc" implements="force:appHostable" access="global">
<aura:attribute name="CoursesDetailsWithOfferings" type="sObject[]" access="global" default=""/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" access="global"/>

<aura:iteration items="{!v.CoursesDetailsWithOfferings}" var="courseDetail">                 
    <li id="{!courseDetail.courseName}">{!courseDetail.courseName}  </li>
    <span>{!courseDetail.courseOfferings[0].Campus_Location__c}</span>
    <aura:iteration items="{!courseDetail.courseOfferings}" var="courseOffering">
        <span id="{!courseOffering.Campus_Location__c}">{!courseOffering.Campus_Location__c}</span>
    </aura:iteration>
</aura:iteration>

Please check my JSON data which I am getting in the helper.

CoursesDetailsWithOfferings - It contains the following array.

[{courseName: "BCA", 
              courseOfferings:[
                   {Campus_Location__c:"Delhi",
                    Name: "Test1",
                    Start_Date__c: "2017-10-03", 
                    End_Date__c: "2019-10-02"}]},
 {courseName: "MCA", 
              courseOfferings:[
                   {Campus_Location__c:"Goa",
                    Name: "Test2", 
                    Start_Date__c: "2017-11-03", 
                    End_Date__c: "2019-11-02"}]
 }]

Please help me to fix it. Thanks in advance!!!!!

  • How did you define the aura attributes? – Koen Certyn Oct 5 '17 at 14:28
  • I have added component code with attributes – Ghanshyam Kumar Oct 6 '17 at 9:11
0

Please check the following sample code . You need to define your attribute properly.

App

<aura:application >
 <c:ClassOffering/>
</aura:application>

Component

<aura:component controller="LightningTest" implements="force:appHostable" access="global" >

<aura:attribute type="Course[]" name="CoursesDetailsWithOfferings"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:iteration items="{!v.CoursesDetailsWithOfferings}" var="courseDetail">                 
        <li id="{!courseDetail.courseName}">{!courseDetail.courseName}</li>

    <span>{!courseDetail.courseOfferings[0].campus_location}</span> <br/>
       <aura:iteration items="{!courseDetail.courseOfferings}" 
var="courseOffering">
            <span id="{!courseOffering.campus_location}">
{!courseOffering.campus_location}</span>
       </aura:iteration>
</aura:iteration>

</aura:component>

Controller

({
doInit : function(component, event, helper) {
    var action=component.get("c.getCourses");
    console.log('inside do init');
    action.setCallback(this,function(resp){
       console.log(resp.getReturnValue()) ;
       component.set("v.CoursesDetailsWithOfferings",resp.getReturnValue());
    });
    $A.enqueueAction(action);
}
})

Lightning Server-Side Controller

public class LightningTest{


@auraEnabled
public static List<Course> getCourses(){

    list<Course> courses=new List<Course>();
    for(integer i=0;i<=1;i++){
        course c=new course();
        c.courseName= 'course '+ string.valueOf(i);

        for(integer j=0;j<=1;j++){
            courseOffering offering=new courseOffering();
            offering.campus_location ='location ' + string.valueOf(j);
            offering.Name='offering name ' + string.valueOf(j);
            c.addOffering(offering);

        }
        courses.add(c);
    }

    return courses;

}


}

Data Classes

public class Course{
    @auraEnabled
    public string courseName;
    @auraEnabled
    public List<courseOffering> courseOfferings;
    public course(){
        courseOfferings=new List<courseOffering>();
    }
    public void addOffering(courseOffering offer){
        courseOfferings.add(offer);
    }

}

public class courseOffering{
    @auraEnabled
    public string campus_location;
    @auraEnabled
    public string name;

}
| improve this answer | |

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.