forkJoin HTTP请求并合并数组中的响应

时间:2017-11-09 17:23:59

标签: angular rxjs

我在这里已经阅读了很多答案,但看起来我无法使其发挥作用。

我有一个数据数组,我想迭代它并调用每个项目,一个HTTP服务。然后将结果连接到一个数组中。

HTTP请求返回类似这样的对象:

{
   "id": 1,
   "data": {"seriesData": <array_of_objects>},
   "other": other data
}

我想要的是合并所有回复的data['seriesData']

let responses: Array<Observable<any>> = [];

for ( let country of this.selectedCountries ) {
    let response: Observable<any> = this.myApi.getChartData(country);
    responses.push(response);
}

Observable.forkJoin(responses)
   .map( response => response.reduce((a,b) => { return _.merge(a.data.seriesData, b.data.seriesData)}) )
   .subscribe( res => {            
        this.myData = res;
  });

但是,我收到错误TypeError: Cannot read property 'seriesData' of undefined

1 个答案:

答案 0 :(得分:2)

这是因为_.merge(a.data.seriesData, b.data.seriesData)将返回没有.data.seriesData的对象。

另外,我建议您将逻辑编写为一系列转换,而不是for of + reduce。这样你就可以对它进行更多控制,这会消耗更少的内存,因为会逐渐收集结果

// just to emulate request
const getFakeData = (country) => {
  return Rx.Observable
    .of({
      id: Date.now(),
      data: { 
        "seriesData": Array.from({ length: 10 })
          .map((_, index) => country + '-' + index),
        "other": 'other data'
      }
    })
    .delay(1000);
};

Rx.Observable
  .from(['en', 'de', 'uk', 'fr'])
  // mergeMap will do request in parralel, concatMap - successively
  .mergeMap(country => getFakeData(country))
  .reduce((acc, v) => acc.concat(v.data.seriesData), [])
  .subscribe(v => console.log(v));
<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>