Доступ к свойствам объекта на основе идентификатора, присутствующего в массиве

Question

У меня есть 2 API под названием teachers и sessions.

teachers JSON Файл:

[
      {
        "teacherName": "Binky Alderwick",
        "id": "01"
      },
      {
        "teacherName": "Basilio Gregg",
        "id": "02"
      },
      {
        "teacherName": "Binky Alderwick",
        "id": "03"
      },
      {
        "teacherName": "Cole Moxom",
        "id": "04"
      }
    ] 

sessions JSON file:

[
    {
        "id":"001",
        "sessionName": "Chemistry",
        "notes": "Chemistry is the study of matter, its properties",
        "teacherIds": ["01","03"]<==========
    },
    {
        "id":"002",
        "sessionName": "Physics",
        "notes": "Physics is the natural science that studies matter and its motion ",
        "teacherIds": ["02","04"]
    },
    {
        "id":"003",
        "sessionName": "Maths",
        "notes": "Mathematics includes the study of such topics as quantity",
        "teacherIds": ["01","04"]<=========

    },
    {
        "id":"004",
        "sessionName": "Biology",
       "notes": "Biology is the natural science that studies life and living organisms",
        "teacherIds": ["02","04"]
    }
]

Теперь я показываю всех учителей в шаблоне так:

В сессий JSON, я упомянул teacherIDs , который является массивом, я хочу отобразить сеансы конкретного учителя на основе teacherID.

Для сессий ex(Химия и математика) содержит teacherID как (01), поэтому я хочу отобразить эти 2 занятия (Химия и математика) в Учитель 1 (я, Бинки Олдервик) Как это:

Я должен получить все свойства объекта session на основе teacherId.

Stackblitz DEMO

Answer 1

Это работает в вашем стеке

<h4>Teachers</h4>
<div class="cust-detail" *ngFor="let teacher of teachers">
    <tr>
        <td>Name</td>
        <td>{{ teacher.teacherName }}</td>
    </tr>
    <tr>
  <td>Sessions</td>
  <div *ngFor="let session of sessions">
    <span *ngFor="let id of session.teacherId">
      <span *ngIf="id == teacher.id">
        <h2>{{ session.sessionName }}, {{ session.id }}</h2>
        <p>{{session.notes}}</p>
      </span>
    </span>
    </div>
  </tr> 
    <hr>
</div>

Не забудьте удалить стрелки из вашего JSON, прежде чем вставлять это.

Answer 2

Вам нужно манипулировать вашим JSON для того же, что и ниже -

getManipulatedData() {
    this.teachers && this.teachers.forEach(res => {
      res['subjects'] = [];
      this.sessions.forEach(obj => {
        if (obj['teacherId'].includes(res.id)){
          res['subjects'].push({subject: obj.sessionName, notes: obj.notes})
        }
      });
    });
  }

<h4>Teachers</h4>
<div class="cust-detail" *ngFor="let teacher of teachers">
    <tr>
        <td>Name</td>
        <td>{{teacher.teacherName }}</td>
    </tr>
    <tr>
        <td>Sessions</td>
        <td><br>
    <div *ngFor='let subject of teacher?.subjects'>
      <h2>{{subject?.subject}}</h2>
      <p>{{subject?.notes}}</p>
    </div>
    </td>
    </tr>   
    <hr>
</div>

Рабочий пример

Обновление -

Также вынужно вызвать этот метод в конце вызова API, как это -

ngOnInit() {
    this.myService.getContacts()
      .subscribe(res => {
        this.teachers = res;
        this.getManipulatedData();
      });
    this.myService.getWorkers()
      .subscribe(res => {
        this.sessions = res;
        this.getManipulatedData();
      });
  }