嵌套 angular 个 http 可观察调用

Question

被困在这个问题上有一段时间了。我想要实现的是用 api.

的 http 响应替换产品 ID

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.log)
  );

基本上 returns 我用 http observables 代替产品 ID（不是 api 响应）。

点击结果

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

我知道会有更简单的方法来实现这一点，但到目前为止我还没有找到任何东西（尝试过 promises 等）。任何帮助将不胜感激，如果您有任何其他问题，请告诉我。

干杯

Answer 1

您的代码没有提供任何关于您的 .json 以及您想要得到它的线索，但它的想法始终相同

你调用一个数组
您创建了一个包含您需要搜索的元素的数组
你创建了这个新元素的 forkJoin
你将结果添加到第一个数组

在伪代码中，用作“灵感”

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
        }
    )  
}
))

嵌套 angular 个 http 可观察调用

Nested angular http observable calls

json

object

observable

rxjs

angular