[Fixed] Rearrange JSON data to appear in a table row

Issue

In a table I want to display the following items in a single Row. Can someone help me out loop the JSON so I can rearrange the items as shown below.

StudentId | CourseTitle | TextbookName

23 | Biology | Biology Today

JSON

{
    "studentId": 23,
    "course": [{
        "courseTitle": "Biology",
        "textBook": 1,
        "TextBooks": {
            "textbookId": 1,
            "textbookName": "Biology Today"
        }
    }, ... ]
}

CODE

<table class="table">
     <tbody>
         <tr *ngFor="let student of this.listOfStudents">
             <td >{{student ?.studentId}}</td>                                   
         </tr>
    </tbody>
</table>

Solution

If I got it right, try following:

<table class="table">
  <tbody>
    <ng-container *ngFor="let student of this.listOfStudents">
        <tr *ngFor="let course of student.course">
            <td>{{ student.studentId }} | {{ course.courseTitle }} | {{ course.TextBooks.textbookName }}</td>                                   
        </tr>
    </ng-container>
 </tbody>
</table>