Есть ли способ для отображения данных из API, где ключ идентификатора взят из другого ключа?

Question

Данные JSON:

"abcd":[
      {
        "id":"1",
        "cityId":"2",
      },
      {
        "id":"2",
        "cityId":"3",
      }         
],

"city":[
      {
        "id":"2",
        "cityName":"california"
      },
      {
        "id":"3",
        "cityName":"vicecity"
      }
]

Угловой:

<div *ngFor="let clg of abcd$">
  <p>
 {{clg.cityId}} 
<!-- Here i need to print the cityname from city by using the cityId we have got from abcd -->

  </p>
</div>

app.component.ts:

ngOnInit() {

    this.data.getColleges().subscribe(
      data => this.abcd$ = data
    )
}

Выборка данных из "abcd" работает отлично.... и никаких проблем в получении данных из "города" тоже.Но можно ли выбрать cityName из "city", используя ключ cityId из раздела "abcd".

Answer 1

Попробуйте,

<div *ngFor="let clg of abcd$">
    <p>
        {{clg.cityId}} 
        <span *ngFor="let c of city" [hidden]="c.id!=clg.id">
            {{c.cityName}}
        </span>  
    </p>
</div>

Answer 2

Вы можете использовать метод, чтобы получить город по ID:

app.component.ts:

getCityByID = (cityID) => {
  return this.city$.find(item => item.id === cityID);
}

Шаблон:

<div *ngFor="let clg of abcd$">
  <p>

    {{ clg.cityId }} 

    {{ getCityByID(clg.cityId).cityName }}

  </p>
</div>

Обновление

Насколько я понимаю, вы выбираете колледжи и города с двумя отдельными наблюдаемыми. Из-за этого, когда вы пытаетесь получить город по идентификатору, он может (или не может) выдать ошибку, если вторая наблюдаемая еще не разрешена. Итак, вам нужно объединить / объединить эти два потока вместе. Я предпочитаю combineLatest сделать это, но forkJoin также будет работать.

В app.component.ts:

import { combineLatest } from 'rxjs';
......

ngOnInit() {

    combineLatest(
         this.data.getColleges(),
         this.data.getCity()
    ).subscribe(([colleges, cities]) => {
         this.abcd$ = colleges;
         this.city$ = cities;
     });
}

Таким образом, вы убедитесь, что включены abcd$ и city$. Надеюсь, это поможет.

Для дальнейшего чтения:

объединитьПоследние: https://www.learnrxjs.io/operators/combination/combinelatest.html

forkJoin: https://www.learnrxjs.io/operators/combination/forkjoin.html