如何在另一个JSON对象中将JSON对象值用作外键？

Question

在Angular应用中，我正在使用HTTPClient读取一些JSON文件。

我的文件是offers.json和managers.json。

以下是用于读取两个JSON文件的接口：

export interface IOffer {
    id: number;
    managerId: number;
}

export interface IManager {
    id: number;
    fullName: string;
}

下表显示了offers.json中的数据。

<table class="table table-hover" *ngIf="offers && offers.length">
    <thead>
        <tr>
            <th scope="col">Offer ID</th>
            <th scope="col">Manager ID</th>
        </tr>
    </thead>
    <tbody>
    <tr *ngFor="let offer of offers">
        <td>{{offer.id}}</td>
        <td>{{offer.managerId}}</td>
    </tr>
    </tbody>
</table>

我不想使用显示managerId的值，而是要使用它来搜索managers.json。

有人可以告诉我如何使用fullName中的managerId来填充offers.json中的fullName吗？

我正在寻找这样的东西：

上面的报价ID 来自managers.json，而offers.json用于搜索managerId并显示 fullName < / p>

Answer 1

实现此目标的正确方法是使用视图模型。您可以将视图模型视为描述要在页面上显示的数据的界面。

使用商品ID和管理员名称的属性创建一个新界面，如下所示：

interface OfferAndManagerVM {
  offerId: number;
  managerName: string;
}

现在，使用可观察对象的功能将您的要约和经理数据映射到视图模型中-像这样：

import { Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

const offersAndManagers: Observable<OfferAndManagerVM[]> = combineLatest(
  offerService.getOffers(),
  managerService.getManagers(),
).pipe(
  map((data: [IOffer[], IManager[]]) =>
    data[0].map(offer => {
      const manager = data[1].find(manager => manager.id === offer.managerId);
      const managerName = manager != null ? manager.fullName : null;
      return {
        offerId: offer.id,
        managerName,
      };
    }),
  ),
);

Answer 2

您需要执行以下一项操作：

1. 使用诸如managers.find(e => e.id==searchID).name之类的查询手动搜索manager.json。

2. 重组获取json数据的查询，以包含您要显示的值，以便您的经理姓名包含在offers.json中。

对象中没有默认的外键概念。您可以包含一个ID以在另一个数组中执行查找，或者包含相关信息。

如果要修改现有表，只需编写一个函数以获取管理器ID，找到名称，然后返回名称。

getName(id) {
  return this.managers.find(e => e.id == id).name;
}

<table class="table table-hover" *ngIf="offers && offers.length">
  <thead>
    <tr>
      <th scope="col">Offer ID</th>
      <th scope="col">Manager ID</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let offer of offers">
      <td>{{offer.id}}</td>
      <td>{{getName(manager.id)}}</td>
    </tr>
  </tbody>
</table>