Как использовать значение объекта JSON в качестве внешнего ключа в другом объекте JSON? - PullRequest
Новая
       20

Как использовать значение объекта JSON в качестве внешнего ключа в другом объекте JSON?

1 голос
/ 19 июня 2019

В моем приложении 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 из managers.json?

Я ищу что-то вроде этого:

here

Где ID предложения выше от offers.json иmanagerId используется для поиска managers.json и отображения fullName

Ответы [ 2 ]

1 голос
/ 19 июня 2019

Правильный способ добиться этого - с помощью View Model.Вы можете рассматривать модель представления как интерфейс, который описывает данные, отображаемые на вашей странице.

Создайте новый интерфейс со свойствами для идентификатора предложения и имени менеджера, например: 

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,
      };
    }),
  ),
);
0 голосов
/ 19 июня 2019

Вам необходимо выполнить одно из следующих действий:

  1. Вручную выполнить поиск manager.json с помощью поиска, например, managers.find(e => e.id==searchID).name.

  2. Реструктурируйте ваш запрос, который выбирает данные json, чтобы включить значение, которое вы хотите отобразить, так, чтобы имя вашего менеджера было включено в offer.json.

Нет концепции по умолчанию длявнешние ключи в объектах.Вы либо добавляете идентификатор для выполнения поиска в другом массиве, либо включаете соответствующую информацию.

Если вы хотите изменить существующую таблицу, вам просто нужно написать функцию для получения идентификатора менеджера, найтиимя и вернуть имя.

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>
...