Creating a table from data with multiple levels of arrays and sub-arrays can be challenging, especially when existing solutions are limited to two levels. For instance, consider the sample data below:
$scope.professors = [{
'name': 'Albert Einstein',
'classes': [{
'name': 'Physics 101',
'students': [{
'name': 'Joe',
'grade': 'B'
}, {
'name': 'Mary',
'grade': 'A'
}]
}, {
'name': 'Physics 201',
'students': [{
'name': 'Gunther',
'grade': 'C'
}, {
'name': 'Hans',
'grade': 'C'
}]
}]
}, {
'name': 'Charles Darwin',
'classes': [{
'name': 'Biololgy 101',
'students': [{
'name': 'Danielle',
'grade': 'A'
}, {
'name': 'Anne',
'grade': 'A'
}]
}, {
'name': 'Biology 201',
'students': [{
'name': 'Frida',
'grade': 'A'
}, {
'name': 'Fritz',
'grade': 'F'
}]
}]
}];
To display all professors along with their disciplines, students, and grades in a table-report, you'd typically use an HTML table structure like this:
<table>
<tbody>
<!-- Table content goes here -->
</tbody>
</table>
The existing solutions often rely on ng-repeat for each professor and another within that for each "class" for that professor. However, extending this to include students poses a challenge.