Вложенные угловые http наблюдаемые вызовы

Застрял на этой проблеме на некоторое время. Чего я пытаюсь добиться, так это заменить идентификаторы продуктов на http-ответ от API.

Ответ appConfig (упрощенный)

[
  {
    ...,
    hotspot: [
      {
        ...,
        data: {
          ...,
          products: [1234, 5678]
        }
      },
      {
        ...,
        data: {
          ...,
          products: [8910, 1112]
        }
      }      
    ]
  }
]

Код, который я сейчас использую (действительно простой на данный момент).

public readonly loadAppConfig$ = this._retailerSrv.retailer$.pipe(
    filter((retailer) => Boolean(retailer)),
    switchMap((retailer) =>
      combineLatest([
        of(retailer),
        this._roomConfigSrv.loadAppConfig$(),
        this._authSrv.getApiKey$(retailer),
      ])
    ),
    map(([retailer, appConfigs, authResponse]) => {
      return appConfigs.map((appConfig) => {
        this._authSrv.apiKey = authResponse.access_token;
        return {
          ...appConfig,
          hotspots: appConfig.hotspots.map((hotspotConfig) => {
            if (
              hotspotConfig.type === 'products' &&
              hotspotConfig.data.products
            ) {
              return {
                ...hotspotConfig,
                data: hotspotConfig.data.products.map((productId) =>
                  this._authSrv.getProductFromApi$(
                    productId,
                    retailer
                  )
                ),
              };
            }
            return {
              ...hotspotConfig,
            };
          }),
        };
      });
    }),
    tap(console.info)
  );

Что в основном возвращает меня с наблюдаемыми http вместо идентификаторов продукта (а не ответов API).

Результат от крана

[
  {
    ...,
    hotspot: [
      {
        ...,
        data: {
          ...,
          products: [Observable, Observable]
        }
      },
      {
        ...,
        data: {
          ...,
          products: [Observable, Observable]
        }
      }      
    ]
  }
]

Я знаю, что есть более простой способ добиться этого, но я пока ничего не нашел (пробовал обещания и т. д.). Любая помощь будет высоко оценена, и, пожалуйста, дайте мне знать, если у вас есть другие вопросы.

Ваше здоровье

Как сделать HTTP-запрос в Javascript?
Как сделать HTTP-запрос в Javascript?
В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:
0
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

ваш код не дает никакого представления о вашем .json и о том, что вы хотите его получить, но идея всегда одна и та же

  1. вы делаете вызов, чтобы получить массив
  2. Вы создаете массив с элементами, которые вам нужны для поиска
  3. вы делаете forkJoin из этих новых элементов
  4. вы добавляете результат в первый массив

В псевдокоде использовать как «вдохновение»

loadAppConfig.pipe(
switchMap(configData=>{
    ..here we has config..
    let products=[]; //we create an array with the products
    configData.hotspot.forEach(x=>{
       products=[...products,x.data.products] //we fill the array "products" 
    })
    return forkJoin(products.map(p=>loadProduct(p)).pipe( //we create an array of observables
        map(productResult=>{
            ..here change the "config" that is store in "configData"...
            ..using "productResult"...,e.g.
            configData.hotsport.forEach(x=>{
              const product=productResult.find(x=>p.key==x.data.product
               x.data.productData=product
            })
            ...finally...
            return configData
        }
    )  
}
))

Другие вопросы по теме

NgIf может ссылаться на переменную во вложенном ngFor в Angular 1.5. Как добиться того же в Angular 10?
Как получить доступ и setState() родительского компонента из дочернего компонента onClick
Указанное значение не может быть проанализировано или находится вне допустимого диапазона при использовании числового конвейера
Неправильный редирект на Localhost
Как вызвать метод компонента внутри функции события в Angular?
Angular Установите курсор ввода для следующего ввода, PS: следующий тег ввода будет динамически добавлен при нажатии клавиши Enter предыдущего ввода
PrimeNG p-checkbox - Добавить обязательный знак звездочки после метки
Можно ли передавать данные после инициализации компонентов?
Как отфильтровать данные из списка и удалить существующую комнату из данных в angular
Создание приложения ionic angular терпит неудачу при сборке из teamcity, но преуспевает везде