Parallel $http calls using same object - angularjs

Question

I have the following function in a controller:
this.someFunction = function() {
var filter = {
type: 'E'
};
someService.httpPostFunction(filter).then(function(response) {
console.log(response);
});
filter.type = 'H';
someService.httpPostFunction(filter).then(function(response) {
console.log(response);
});
filter.type = 'W';
someService.httpPostFunction(filter).then(function(response) {
console.log(response);
});
};
This is the someService.httpPostFunction :
httpPostFunction: function(filter) {
var deferred = $q.defer();
var httpPromise = $http.post(url,filter)
.then(function(response) {
deferred.resolve(response.data);
}, function(error) {
deferred.reject(error.data);
});
return deferred.promise;
}
The someService.httpPostFunction returns me different data based on filter.type. I want them to run in parallel. However, this function behaves as if the filter.type is set to 'W' even on the first httpPostFunction call.
Creating copies of the filter variable, changing type of the copies and then passing the copies gives me correct results but this is not feasible. How do I get the code working correctly using the same variable?

Answer 1

You could use an array to store the promises and then use $q.all to catch all the promises something like below
this.someFunction = function() {
var filterObj = {
type: ['E', 'H', 'W']
};
var promises = filterObj.type.map(function(v) {
return someService.httpPostFunction(v);
});
$q.all(promises).then(function(response) {
console.log(response[0]); //type E
console.log(response[1]); //type H
console.log(response[2]); //type W
});
};

Answer 2

you can use $q.all to send multiple http request parallel
var filterObj = {
type: ['E', 'H', 'W']
};
var arr = [];
for(item in filterObj.type){
arr.push(someService.httpPostFunction(item))
}
$q.all(arr).then(function(responses) {
console.log( responses[0].data);
console.log( responses[1].data);
console.log( responses[2].data);
});