Angular: linking data to dynamic table using *ngFor

Question

I am creating a dynamic table. The problem with my json structure below is that the Students object does not contain Subjects array within the object, but rather Students[] and Subjects[] are defined through Links[], where there is link defined for student a subject.

The output of the table should look like this:

Do you have any suggestions how to create *ngFor in ??? area that links each student to its subjects?

The json structure looks like this:

export class StudentsAndSubjects {
 info: SchoolInformation;
}

export class SchoolInformation {
 students: Students[];
 subjects: Subjects[];
 links: Links[];
}

export class Students {
 id: string;   //example: student_1
 name: string;
 surname: string;
};
export class Subjects{
 id: string;   //example: subject_1
 name: string;
};
export class Links{
 studentId: string; //example: student_1
 subjectId: string; //example: subject_1
};

The table structure:

@Component({
 selector: 'app-student-and-subjects',
 template: `
   <table>
     <tr *ngFor="let row of rowHeaders">
        <td *ngFor="let item of data.info.students.name">
           <span *ngIf="row !== 'Subjects'">{{ item[row] }}</span>
        </td>
        <table *ngIf="row === 'Subjects'">
            <tr **???**>
               <td>{{ subject}}</td>
            </tr>
        </table>
     </tr>
   </table>
`;
})
export class StudentsAndSubjects {
 @Input() data: StudentSubjectData;
 readonly rowHeaders = ['Student','Subjects']
}

Answer 1

First, I think you need to restructure your table a bit. Since the table of subjects is associated to a particular student, it should probably live inside the td that contains that student's data:

<table>
  <tr *ngFor="let row of rowHeaders">
    <td *ngFor="let student of data.info.students"> <--- each td contains data for a student
      <span *ngIf="row !== 'Subjects'">{{ student.name }}</span>

      <table *ngIf="row === 'Subjects'"> <--- move this table inside the td
        <tr>
          <td *ngFor="let subject of getSubjectsForStudent(student)"> <-- the *ngFor you were missing
            {{ subject.name }}
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Also note that I changed your *ngFor="let item of data.info.students.name" so it iterates over data.info.students rather than data.info.students.name since you need the student instance data (and data.info.students.name isn't a collection).

And to display the student name, I replaced {{ item[row] }} with {{ student.name }}.

Then, to display the subjects for that student, you would need to create a method that accepts the student object (or just its id) and then parses the data and returns the student's associated subjects.

That method is what you would need in the missing *ngFor that you're asking about.

(Alternatively, of course, you could transform the data ahead of time into a mapping object that maps the students to their subjects.)

So the missing *ngFor that you're asking about would look something like this:

<td *ngFor="let subject of getSubjectsForStudent(student)">

Note that it's on the td, not the tr like in your markup. That's because each subject has its own cell, not its own row—all subjects are in the same row.

Here's a StackBlitz showing this approach.