RxJS observablesを順番に使用する方法は？

Question

ここには次のようなものがあります。私はオブジェクトのJSONリストを返すHTTP get要求を持っています。 RxJSを使用して、そのリストのデータを受信するために購読します。今、そのリスト内のオブジェクトごとに、別のHTTPリクエストを実行して、そのリクエストの結果をArrayに配置します。

これまで私はこれを行うことができましたが、データで初期リストの順序を維持する方法を理解できないようです。 Observableメカニズム全体が非同期であるという事実と関係していると思われます。ここで

は私のコードです：

ngOnInit(): void { 
    this.shiftInformationService.getShifts("2016-11-03T06:00:00Z", "2016-11-06T06:00:00Z") 
     .subscribe(shifts => { 
      shifts.forEach(shift => { 
       this.addDataToAreaChart(shift.startDateTime, shift.endDateTime, shift.description); 
      }); 
     }); 

} 

addDataToAreaChart(startDate: string, endDate: string, description: string) { 
    this.machineStatisticsService 
     .getCumulativeMachineStateDurations(startDate, endDate) 
     .subscribe(s => { 
      this.areaChartData = []; 
      this.areaChartData.push(new AreaChartData(startDate, endDate, description, s)); 
     }); 
} 

私が欲しいものareaChartData配列内のデータをプッシュするときshifts.forEachループからの呼び出しの順序を維持することです。

アイデア？助けていただければ幸いです！

UPDATE：SOLVED！

決勝コード：マイケルへ

ngOnInit(): void { 
    var startDate = new Date(); 
    startDate.setDate(startDate.getDate() - 3); 

    this.shiftInformationService.getShifts(DateUtil.formatDate(startDate), DateUtil.formatDate(new Date())) 
     .subscribe(shifts => { 
      Observable.from(shifts) 
       .concatMap((shift) => { 
        return this.machineStatisticsService 
         .getCumulativeMachineStateDurations(shift.startDateTime, shift.endDateTime) 
         .map((result) => { 
          return { 
           "addDataToAreaChartValue": result, 
           "shift": shift 
          } 
         }); 
       }) 
       .subscribe(s => { 
        this.areaChartData = []; 
        this.areaChartData.push(
         new AreaChartData(
          s.shift.startDateTime, 
          s.shift.endDateTime, 
          s.shift.description + ' ' + s.shift.startDateTime.slice(5, 10), 
          s.addDataToAreaChartValue 
         ) 
        ); 
       }); 
     }); 
} 

ありがとう！

Answer 1

concatMapを順番に処理してください。

それぞれのソース値をObservableの出力にマージされたObservableに投影します。この出力はObservableの出力にマージされます。

mapを使用して、オブザーバブルに値を追加/変換します。

ソースObservableによって生成された各値に特定のプロジェクト関数を適用し、Observableとして結果の値を出力します。だから、

、あなたがこの

ngOnInit(): void { 
    this.shiftInformationService.getShifts("2016-11-03T06:00:00Z", "2016-11-06T06:00:00Z") 
     .subscribe(shifts => { 
      Rx.Observable.from(shifts) // create observable of each value in array 
       .concatMap((shift) => { // process in sequence 
        return this.addDataToAreaChart(
         shift.startDateTime, 
         shift.endDateTime, 
         shift.description 
        ).map((result) => { 
         return { 
          "addDataToAreaChartValue" : result, // addDataToAreaChart result 
          "shift": shift // append shift object here, so we can access it on subscribe 
         } 
        }); 
       }) 
       .subscribe(s => { 
        //this.areaChartData = []; // why?? 
        this.areaChartData.push(
         new AreaChartData(
          s.shift.startDate, 
          s.shift.endDate, 
          s.shift.description, 
          s.addDataToAreaChartValue 
         ) 
        ); 
       }); 
     }); 
} 

addDataToAreaChart(startDate: string, endDate: string, description: string) { 
    return this.machineStatisticsService 
     getCumulativeMachineStateDurations(startDate, endDate); 
}