Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ghanshyam Kumar 9Ghanshyam Kumar 9 

Getting error while using nested aura:iteration in lightning component

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 3rd line code. 
<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!!!!!
NagendraNagendra (Salesforce Developers) 
Hi Kumar,

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;

}
Hope this helps.

Kindly mark this as solved if it's resolved so that it will be helpful for others who are facing the same issue.

Thanks,
Nagendra