AngularJS Service duplicate response in controller - angularjs

Question

I'm calling the following service:
Get accounts details
First piece of code in my controller:
//resp is coming from an $http sync request, above the below request.
for (var i = 0; i < resp.rows; ++i) {
userService.getAccountsBalance($rootScope.userid, resp[i]['Acct_Number']).then(function(data){
console.log(data.bal) // shows two duplicate balances
});
}
In my service:
app.service('userService', function($rootScope, $q){
var deferred = $q.defer();
this.getAccountsBalance = function(userid, accountNum){
console.log(userid + " " + accountNum)
var req = <my $http request>
req.send().then(function(resp){
deferred.resolve(resp.responseJSON);
});
console.log(deferred.promise) //// prints two balances JSON objects with no duplicate
return deferred.promise;
}
});
My question is, I can see that two requests(with different parameter) has been executed in my service, and returning two different balances for two accounts. However, in my controller I get two duplicate results. I only get the last response twice.
I'm pretty sure it has something to do with promises, and I'm still new.

Answer 1

The problem seems to be you are returning the same promise for both requests,
app.service('userService', function($rootScope, $q){
this.getAccountsBalance = function(userid, accountNum){
var deferred = $q.defer();
Change it like above and it should work.

Answer 2

In order to loop through promises, you should use the $q service which provide the $.all method that allows you to resolve only when all promises has been resolved, and then get the data for each promise

Answer 3

When there are multiple promises are involved,if anyone promise get resolved all promise will get resolved with same value.
So you should use $q.all() to get result of all promises.
You can do in this way.
Inject $q Service.
var arrAllPromise = [];
for (var i = 0; i < resp.rows; ++i) {
arrAllPromise[i] = userService.getAccountsBalance($rootScope.userid, resp[i]['Acct_Number'])
}
$q.all(arrAllPromise).then(function(data) {
console.log(data) // shows two duplicate balances
});
It will give all promise data with which it is resolved.

Answer 4

Basically problem was you were having common $q object for promise.When your 1st promise gets resolved, the outer $q promiseis resolved by some response.
Then you had 2nd call for the same function, it would make that $http call but return old resolved promise. Because old $q object has fulfilled its promise already.
For solving the problem, you should have separate $q.defer() inside method. So that each time proper data will return by service method
You are creating a custom promise using $q,which is considered as bad pattern. As you have $http.get method is there in place, you can utilize their promise(each $http method promise, and we can chain them using .then)
Service
app.service('userService', function($rootScope, $q){
this.getAccountsBalance = function(userid, accountNum){
var req = <my $http request>
//utilize promise object returned by $http
req.send().then(function(resp){
//return data that sent to promise chain function
return resp.data;
});
}
});