RxJS Наблюдаемое Слияние

Question

Предположим, у меня есть REST-сервер с двумя возможными GET-запросами.
Один такой: /allItems, а другой: /{itemId}/picture.
Первый возвращает все сохраненные элементы на моем сервере в виде массива (только один раз), в котором у каждого есть идентификатор.
Для каждого из них я хотел бы запросить их соответствующую фотографию и сопоставить ее с ними.
Примерно так:

this.http.get('/allItems').map(itemArray => {
   itemArray.forEach(item => {
       this.http.get('/' + item.id + '/picture')
                .subscribe(pic => item.pic = pic)
   return itemArray
 }
})

В конце я хочу вернуть one Observable, который испускает массив элементов с сопоставленными их изображениями, чтобы другие функции могли получить доступ к полным данным.

Стоит упомянуть: я использую Angular / Typescript.

Answer 1

Я понимаю из комментариев, что ОП уже нашел решение. Для тех, кто интересуется, вот как вы можете использовать forkJoin , который ждет Array. Цикл forEach () должен быть завершен перед возвратом наблюдаемых значений.

Вот как это можно реализовать:

import { forkJoin } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

this.http.get('/allItems').pipe(
  mergeMap(itemArray => {
    const observableList = [];
    itemArray.forEach(item => {
      observableList.push(this.http.get(`/${item.id}/picture`));
    });
    return forkJoin(observableList);
  )}
).subscribe(res => {
  console.log(res);
  // handle the rest here
})

Answer 2

@ emkay Я рефакторинг вашего кода.Я думаю, что это выглядит лучше.@ mortom123 хотите заменить в значении объекта для ключа рис.

this.http.get('/allItems')
 .pipe(
  .mergeMap((itemArray) => from(itemArray))
  .mergeMap((item) => this.http.get(`/${item.id}/picture`))
   .pipe(
    map((picture) => (
      {
        ...item,
        pic: picture
      })
 ).subscribe((data) => console.log(data));

Answer 3

Один из подходов к этой проблеме может быть примерно таким: -

this.http.get('/allItems').pipe(
  mergeMap((itemsArray) => of(itemsArray)),
  mergeMap(item => this.http.get('/' + item.id + '/picture')
    .pipe(
      map(picture => { const a = { 'item': item, 'image': picture }; return a; })
    ),
    toArray()),
).subscribe();  ---> this will give the array of json with item and picture field.