Displaying data from two data sources in angular 10 mat-table

Question

Current configuration is Angular 10, with c# asp.net core 3.1 web api

So, I am attempting to use the data from the following two tables

Student Records                    Homework Records
id  |  Name    |  HW ID            id  |  HW_Name
=======================            ==========================
1   |  Bob     |  7        AND     7   |  Addition_practice_1
2   |  Bob     |  10               10  |  Addition_practice_2

GOAL : In an angular table I want to display all the columns from Student records except for the HW ID. In that place I want to grab the HW_Name associated with the HW_ID. For example I would want this to be the output angular table:

Student   |   HW Name
==================================
Bob       |   Addition_practice_1
Bob       |   Addition_practice_2

my.ts:

  ngOnInit(): void {
    this.studentRecordService.getStudentRecordsByName(this.studentName).subscribe((data: any[]) => {
      this.dataSource.data = data;
      this.dataSource.sort = this.sort;
    });

I have been able to successfully pull all the Student records and place them on a table.

However, I have been struggling to find a good way to grab the HW_Name and put it in the table as well. I have all my CRUD operations defined for the Homework records. I was hoping I could simply make my service call to the Homework Records using just the HW_id but I am not sure how to do that.

I was able to get this to print out the correct values

var hw_name;
var student_obs = this.studentService.getStudentByStudentId("fbf81537-b656-40d7-640f-08d8358ce483")
var hw_obs = student_obs.pipe(mergeMap((student: Student) => this.hwRecordService.gethwRecordDetailsById(student.hw_id)));

hw_obs.subscribe((v : Hw_Record) => {
      hw_name = v.name; 
      console.log(bot_name);
    });

This was able to get me the correctly associated hwRecord observable. I feel like I am on the right track using the mergeMap and possible the forkJoin but I cannot find a good example of this being done in a similar way. I have attempted doing the same thing on the scale of the entire observable array, but problems kept coming up.

My main problems are that I don't know several things:

1. In what format does the dataSource need to be in for this to work?
2. Can this be done as simply as I was thinking from the pipe/mergeMap method?

Sorry this is a lot of information. If anyone could provide help it would be greatly appreciated.

Answer 1

If you can change your back-end the best way is to query it directly in your database via SQL

SELECT Students.Name, Homeworks.Name
FROM Students
INNER JOIN Homeworks ON Students.HW_ID=Homeworks.ID;

If you must do it in the your front-end you can do it this way

   forkJoin([this.getAllStudents(), this.getAllHomeworks()]).subscribe(
     ([students, homework]) => {
       this.result = students.map((student) => ({
         name: student.name,
         homework: homework.find((h) => h.id === student.homework_id).name,
       }));
     }
   );

but be aware that you will be fetching all homework records even those that do not have a student associated with it

This way you'll first fetch all students then for each student you'll fetch its homework

  this.getAllStudents()
  .pipe(
    switchMap((students) =>
      forkJoin(
        students.map((s) =>
          getHomeworkById(s.homework_id).pipe(
            map((homework) => ({
              name: s.name,
              homework: homework.name,
            }))
          )
        )
      )
    )
  )
  .subscribe((result) => (this.result = result));