ng-repeat HTML table with colspan and rowspan from nested json - html

Question

I'm trying to achieve table structure attached in the image :
Composite Class Routine
So far what I've tried can be seen in the following Plunker:
https://plnkr.co/edit/4WiWKDIM2bNfnmRjFo91?p=preview
My json data is :
$scope.routines = [
{
"WEEKDAY_ID": 1,
"WEEKDAY": "Sunday",
"aSemester": [
{
"SEMESTER_ID": 1,
"SEMESTER_NAME": "1st",
"aClassTime": [
{
"COURSE_ID": 1,
"COURSE_CODE": "CSTE-1001",
"CLASS_DURATION": 3,
"CLASSTIME_ID": 1,
"CLASSTIME": "9.00-9.50",
"DEPT_ID": 1,
"DEPT_NAME": "Computer Science",
"BUILDING_NAME": "Academic-1",
"ROOM_NO": 101,
"LAB_GROUP": null,
"INSTRUCTOR_ID": 10,
"INSTRUCTOR_NAME": "Abhijit Chakraborty",
"SHORT_CODE": "AC"
},
{
"COURSE_ID": 7,
"COURSE_CODE": "CSTE-1106",
"CLASS_DURATION": 1,
"CLASSTIME_ID": 4,
"CLASSTIME": "12.00-12.50",
"DEPT_ID": 1,
"DEPT_NAME": "Computer Science",
"BUILDING_NAME": "Academic-2",
"ROOM_NO": 258,
"LAB_GROUP": null,
"INSTRUCTOR_ID": 10,
"INSTRUCTOR_NAME": "Abhijit Chakraborty",
"SHORT_CODE": "AC"
},
{
"COURSE_ID": 3,
"COURSE_CODE": "CSTE-1102",
"CLASS_DURATION": 1,
"CLASSTIME_ID": 7,
"CLASSTIME": "4.00-4.50",
"DEPT_ID": 1,
"DEPT_NAME": "Computer Science",
"BUILDING_NAME": "Academic-2",
"ROOM_NO": 252,
"LAB_GROUP": null,
"INSTRUCTOR_ID": 9,
"INSTRUCTOR_NAME": "Dr. Md. Asadun Nabi",
"SHORT_CODE": "MAN"
}
]
},
{
"SEMESTER_ID": 2,
"SEMESTER_NAME": "2nd",
"aClassTime": [
{
"COURSE_ID": 7,
"COURSE_CODE": "CSTE-1106",
"CLASS_DURATION": 1,
"CLASSTIME_ID": 1,
"CLASSTIME": "9.00-9.50",
"DEPT_ID": 1,
"DEPT_NAME": "Computer Science",
"BUILDING_NAME": "Academic-4",
"ROOM_NO": 456,
"LAB_GROUP": null,
"INSTRUCTOR_ID": 6,
"INSTRUCTOR_NAME": "Dr. Humayun Kabir",
"SHORT_CODE": "HK"
},
{
"COURSE_ID": 3,
"COURSE_CODE": "CSTE-1102",
"CLASS_DURATION": 1,
"CLASSTIME_ID": 2,
"CLASSTIME": "10.00-10.50",
"DEPT_ID": 1,
"DEPT_NAME": "Computer Science",
"BUILDING_NAME": "Academic-1",
"ROOM_NO": 102,
"LAB_GROUP": null,
"INSTRUCTOR_ID": 6,
"INSTRUCTOR_NAME": "Dr. Humayun Kabir",
"SHORT_CODE": "HK"
}
]
},
{
"SEMESTER_ID": 3,
"SEMESTER_NAME": "3rd",
"aClassTime": [
{
"COURSE_ID": 5,
"COURSE_CODE": "CSTE-4202",
"CLASS_DURATION": 1,
"CLASSTIME_ID": 7,
"CLASSTIME": "4.00-4.50",
"DEPT_ID": 1,
"DEPT_NAME": "Computer Science",
"BUILDING_NAME": "Academic-2",
"ROOM_NO": 252,
"LAB_GROUP": null,
"INSTRUCTOR_ID": 7,
"INSTRUCTOR_NAME": "Md. Javed Hossain",
"SHORT_CODE": "MJH"
}
]
},
{
"SEMESTER_ID": 4,
"SEMESTER_NAME": "4th",
"aClassTime": [
{
"COURSE_ID": 61,
"COURSE_CODE": "CSTE-2204",
"CLASS_DURATION": 2,
"CLASSTIME_ID": 1,
"CLASSTIME": "9.00-9.50",
"DEPT_ID": 1,
"DEPT_NAME": "Computer Science",
"BUILDING_NAME": "Academic-1",
"ROOM_NO": 404,
"LAB_GROUP": null,
"INSTRUCTOR_ID": 6,
"INSTRUCTOR_NAME": "Dr. Humayun Kabir",
"SHORT_CODE": "HK"
},
{
"COURSE_ID": 62,
"COURSE_CODE": "CSTE-2206",
"CLASS_DURATION": 2,
"CLASSTIME_ID": 3,
"CLASSTIME": "11.00-11.50",
"DEPT_ID": 1,
"DEPT_NAME": "Computer Science",
"BUILDING_NAME": "Academic-1",
"ROOM_NO": 101,
"LAB_GROUP": null,
"INSTRUCTOR_ID": 10,
"INSTRUCTOR_NAME": "Abhijit Chakraborty",
"SHORT_CODE": "AC"
},
{
"COURSE_ID": 63,
"COURSE_CODE": "CSTE-2202",
"CLASS_DURATION": 3,
"CLASSTIME_ID": 5,
"CLASSTIME": "2.00-2.50",
"DEPT_ID": 1,
"DEPT_NAME": "Computer Science",
"BUILDING_NAME": "Academic-3",
"ROOM_NO": 303,
"LAB_GROUP": null,
"INSTRUCTOR_ID": 7,
"INSTRUCTOR_NAME": "Md. Javed Hossain",
"SHORT_CODE": "MJH"
}
]
}
]
}
];
and html I tried so far is :
<table id="routines" class="table table-bordered table-responsive table-condensed">
<thead>
<tr>
<th>Day</th>
<th>Semester</th>
<th ng-repeat="c in classtimes">{{c.CLASSTIME}}</th>
</tr>
</thead>
<tbody ng-repeat="r in routines">
<tr ng-repeat="s in r.aSemester">
<td rowspan="{{r.aSemester.length}}">{{r.WEEKDAY}}</td>
<td>{{s.SEMESTER_NAME}}</td>
<td colspan={{c.CLASS_DURATION}}
ng-repeat="c in s.aClassTime">
{{c.COURSE_CODE}}
</td>
</tr>
</tbody>
any kind of help would be appreciated.

Answer 1

Replace your table body with this
<tbody>
<tr ng-repeat-start="r in routines">
<td rowspan="{{r.aSemester.length+1}}">{{r.WEEKDAY}}</td>
</tr>
<tr ng-repeat="aSem in r.aSemester">
<td>{{aSem.SEMESTER_NAME}}</td>
<td ng-repeat="c in classtimes">
<span ng-repeat="classTime in aSem.aClassTime">
<span ng-if="classTime.CLASSTIME_ID==c.CLASSTIME_ID">
{{classTime.COURSE_CODE}}
</span>
</span>
</td>
</tr>
<tr ng-repeat-end ></tr>
</tbody>
I think this should help.
Plunkr https://plnkr.co/edit/QFUouMmSKtBiAWMdGpCC?p=preview