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

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.

Shantanu · Accepted Answer · 2018-07-09 04:12:45Z

2

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

answered Jul 9, 2018 at 4:12

Shantanu

3,5332 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Riples Over a year ago

You're an absolute superstar! Thank you so much and that example helps me understand it for future reference.

Riples Over a year ago

Yes true, but I wanted to tap into datatables export to csv functionality, hence why I ventured down this path.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related