86
rated 0 times
[
92]
[
6]
/ answers: 1 / hits: 22173
/ 8 Years ago, thu, november 17, 2016, 12:00:00
Here's the deal: I have a HTTP get request that returns a JSON list of objects. Using RxJS I subscribe to receive the data of that list. Now, for each of the objects in that list I want to perform another HTTP request and then place the results of that request in an Array.
So far I've been able to do this but I can't seem to figure out how to maintain the order of the initial list with data. This probably has to do with the fact that the whole Observable mechanism is asynchronous.
Here's my code:
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));
});
}
What I want is to maintain the order of calling from the shifts.forEach loop when pushing the data in the areaChartData array.
Any ideas? Help would be appreciated!
UPDATE: SOLVED!
Final code:
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
)
);
});
});
}
Thanks to Michael!
More From » angular
