时间戳

首页 > 解决方案 > 根据 ID 显示其他 JSON 对象

typescript - 根据 ID 显示其他 JSON 对象

问题描述

我有 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);
}

}

演示

标签： typescriptangular6

解决方案

您可以像这样处理结果：

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

推荐阅读