I am currently working on processing each element of an array by making a separate HTTP call for each element. I need to track the status of each call and update the UI once all calls are completed. The code snippet below demonstrates my current approach:
for (var singleData of this.someData) {
this._Service.call(singleData.someData).subscribe(
data=> {
this.successGroups.push(singleData);
this.checkState();
},
error=> {
this.failureGroups.push(singleData);
this.checkState();
}
)
}
The service, this._Service, is a basic Angular2 HTTP service that returns observables from the calls. The goals for this process are:
- Make individual calls for each item in the list
- Mark successes as success and failures as failure
- Update the UI once all calls finish, regardless of their success or failure
The issue with the current code is that due to the asynchronous nature of the calls, the "singleData" variable gets updated before the subscriber functions execute. This leads to incorrect values being pushed into the success or failure groups.