Trying to populate html table with ng-repeat using two different arrays - angularjs

Question

I am having some issues trying to populate a table with two arrays. I am trying to achieve the following output:
I have an array called students and within each student object, I have a courses array. I am trying to populate my table using ng-repeat to show all courses against each student.
Not all data is given within each course, meaning that if a student hasn't started a course then it won't appear in the courses array. Also, if a student hasn't finished a course there will be no date completed given.
So my array looks like so:
$scope.students = [
{
Id: 1,
Name: 'Joe Blogs',
Courses: [
{
Title: 'Course 1',
Grade: 87,
Completed: true,
DateCompleted: '2018-01-01'
},
{
Title: 'Course 2',
Grade: 2,
Completed: false
}
]
},
{
Id: 2,
Name: 'Peter Smith',
Courses: [
{
Title: 'Course 1',
Grade: 100,
Completed: true,
DateCompleted: '2018-01-01'
},
{
Title: 'Course 2',
Grade: 95,
Completed: true,
DateCompleted: '2018-01-01'
},
{
Title: 'Course 3',
Grade: 10,
Completed: false
}
]
},
{
Id: 3,
Name: 'Joanne Someone',
Courses: [
{
Title: 'Course 3',
Grade: 55,
Completed: false,
}
]
}
]
So far my code snippet looks like this:
<table class="table table-hover" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Course</th>
<th>Grade</th>
<th>Completed</th>
<th>Date Completed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students">
<td>{{ student.Id }}</td>
<td>{{ student.Name }}</td>
<td>
<!-- Can't figure this bit out -->
</td>
</tr>
</tbody>
</table>
But I am stuck on how to get multiple courses to show against each student. Also I have found that by using ng-repeat, if a value isn't in the object (e.g. Date Completed) then that field will not show and pushes everything up and out of alignment.
Lastly, I will mention that I am using angular-datatables however, I am just trying to work out the concept, then I can apply this to datatables later.

Answer 1

You'll have to use rowspan for that purpose. And the value of that for particular Id should be of length of Courses. Then, you'll need to have ng-repeat on tbody to repeat tbody section & have ng-repeat inside on tr for repeating Courses arrays of each student. So, your table view code can be:
<table>
<thead>
<tr>
<td>Id</td>
<td>Name</td>
<td>Course</td>
<td>Grade</td>
<td>Completed</td>
<td>Date Completed</td>
</tr>
</thead>
<tbody ng-repeat="x in students">
<tr>
<td rowspan="{{x.Courses.length}}"><span>{{ x.Id }}</span></td>
<td rowspan="{{x.Courses.length}}"><span>{{ x.Name }}</span></td>
<td><span>{{x.Courses[0].Title}}</span></td>
<td><span>{{x.Courses[0].Grade}}</span></td>
<td><span>{{x.Courses[0].Completed}}</span></td>
<td><span>{{x.Courses[0].DateCompleted}}</span></td>
</tr>
<tr ng-repeat="item in x.Courses" ng-if="$index > 0">
<td><span>{{item.Title}}</span></td>
<td><span>{{item.Grade}}</span></td>
<td><span>{{item.Completed}}</span></td>
<td><span>{{item.DateCompleted}}</span></td>
</tr>
</tbody>
</table>
To avoid breaking of table code if some values are not available, just have it inside span element so it'll still load td with no value inside it.
Plunker Example