Чтобы отобразить другие объекты JSON на основе их идентификатора

Question

У меня есть 2 файла JSON с именами teachers и sessions, как показано ниже:

учителя

[
  {
    "name": "Teacher 1",
    "sessionId": "02"
  },
  {
    "name": "Teacher 2",
    "sessionId": "03"
  },
  {
    "name": "Teacher 3",
    "sessionId": "01"
  }
]

сессии

    [
    {
        "id":"01",
        "name": "Session 01"
    },
    {
        "id":"02",
        "name": "Session 02"
    },
    {
        "id":"03",
        "name": "Session 03"
    },
    {
        "id":"004",
        "name": "Session 04"
    }
]

Я хочу отобразить сеанс для конкретного teacher следующим образом:

Но я не смог, ниже мой код компонента:

HTML

<h4>Teachers</h4>
<div class="cust-detail" *ngFor="let teacher of teachers">
    <tr>
        <td>Name</td>
        <td>{{teacher.name }}</td>
    </tr>
    <tr>
        <td>Assigned Session: </td>
        <li *ngFor="let session of selectedSession">{{session?.name}}</li>
    </tr>   
    <hr>
</div>

TS

import { Component } from '@angular/core';
import { ContactService } from './contacts.service';
import{ ISessions,ITeachers} from '../models/app.models';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  teachers: ITeachers[];
  sessions: ISessions[];
  public selectedSession: ISessions[];

  constructor(private myService: ContactService) {}

  ngOnInit() {
    this.myService.getTeachers()
      .subscribe(res => this.teachers = res);
       this.myService.getSession()
      .subscribe(res => this.sessions = res);

    for (const teacher of this.teachers)  {
      if (teacher.sessionId) {
        this.getSessionById(teacher.sessionId);
     }
    }

  }


public getSessionById(sessionId: string){
 this.selectedSession = this.sessions ? this.sessions.filter((x: ISessions) => x.id === sessionId) : [];
 console.log(this.selectedSession);
}

}

DEMO

Answer 1

Вы можете обработать результат следующим образом:

this.result = this.teachers.map(teacher => 
({...this.sessions.find(p => teacher.sessionId === p.id), teacher}));

Демо https://stackblitz.com/edit/angular-join-object

Обновлено:

Я обновляю запрос для группового учителя и занятия, которые они преподают, могут быть1 учитель обучает многим занятиям.

 this.result = this.teachers.map(teacher => 
({session: this.sessions.filter(p => teacher.sessionId === p.id), teacher}));

Демонстрация: https://stackblitz.com/edit/angular-join-object-2

Answer 2

Вы никогда не должны подписываться в рамках подписки.Лучше использовать zip, forkJoin или аналогичные.Затем вы можете уменьшить данные и сгруппировать их так, как вы хотите

zip(this.myService.getTeachers(), this.myService.getSession())
  .pipe(
    flatMap(([t, s]) => {
      return of(t.reduce((a, b) => {
        a[b.sessionId] = (a[b.sessionId] || b);
        a[b.sessionId].sessions = s.filter(e => e.id === b.sessionId);
        return a;
      }, {}));
    })
  ).subscribe(e => this.teachers = e);