chaining multiple http calls against a loop - angularjs

Question

I've found all kinds of useful posts/info about $q, $q.all, and chaining in general, but I haven't found any examples of my exact issue, so I'm wondering whether what I want to do is even possible. I've got a series of calls I need to make, and each is dependent on the previous BUT there's a step in the middle where the series splits into several parallels. The gist of it goes something like this:
call #1: get keyword (based on inputs)
call #2: with keyword, get list of items
call #3: with item ID#s, get item profiles
call #4: with data in profiles, get item images
(I know, I know, four calls for just one is ridiculous, let alone sixteen calls total, but this is for a prototype. I don't have to be ultra-speedy. I just need to prove I can get to that final step with the existing data/calls.)
Anyway, this means that #1 is one call for all... and then as of #2, it splits up and I have to do #2, #3, and #4 for each different ID# I got from #1's return. I've mocked up a plunk using jsonplaceholder. It should retrieve the first set, then do the next two calls with the retrieved IDs, one loop per ID.
I've tried a simple for loop (which Plunker tells me I can't do w/a function in it). I've tried an angular.forEach (inside a $scope.watch and outside it), but that doesn't seem to get me anything at all:
angular.forEach($scope.resultsb, function(value, key) {
console.log(key + ': ' + value);
$http.get('http://jsonplaceholder.typicode.com/users?id='+ value)
.then(function(res2){
$scope.data2 = res2.data;
var obj = {
title: $scope.results1[i].title,
id: $scope.data2[i].id,
username: $scope.data2.username
};
$scope.results2.push(obj);
I think the forEach just isn't kicking in properly b/c it can't really run until after I get $scope.results1 (the first step's results), but can I chain an $http call to a loop?
You can see the full thing (in its current version, which may change since I continue to beat at it) at http://plnkr.co/edit/CjXt7E?p=preview. Is what I'm trying even possible, or do I have to do this long-hand?

Answer 1

Your for each will run even without response as it is Asynchronous, instead make a function and call it when you get the callback in .then()
Edited your plunker: http://plnkr.co/edit/mxvvCB?p=preview
like this:
$scope.Call = function(value) {
if(typeof value[$scope.counter] !== 'undefined'){
value = value[$scope.counter].id;
var i =$scope.counter;
console.log(value+' ' +i);
$http.get('http://jsonplaceholder.typicode.com/users?id='+ value)
.then(function(res2){console.log(res2);
$scope.data2 = res2.data;
var obj = {
title: $scope.results1[i].title,
id: $scope.data2[0].id,
username: $scope.data2.username
};
$scope.results2.push(obj);
$scope.counter++;
$scope.Call($scope.resultsb);
});
}
};
I hope it is what you are trying to achieve.

Answer 2

I GOT IT TO WORK.
This might be the worst case of function-use ever, but it works, and I get results. Not entirely -- I think some of the calls time out, so I figured out I need to ask for, like, 6, and then I get at least the 4 results I want. Which is probably indicative of the fact that this desperately calls for a single endpoint instead of doing the logic on the frontend, but it works enough for a prototype, so I'm happy (for now).
In my controller, I get the first set of IDs, and using a simple for-loop, I assign a loop-id to each. Then I call getUser(), with num (to connect the info to the first set of results), and id (to connect to the actual user I'm tracking). Here's the function w/ its internal chains:
function getUser(num, id) {
$http.get('http://jsonplaceholder.typicode.com/users?id='+ id)
.then(function(res2){
$scope.data2 = res2.data;
if ($scope.data2[0].username !== 'undefined') {
var obj = {
num: $scope.results1[num].num,
id: $scope.results1[num].id,
title: $scope.results1[num].title,
username: $scope.data2[0].username
};
$scope.results2.push(obj);
}
return $http.get('http://jsonplaceholder.typicode.com/comments?id=' + id);
}).then(function(res3){
if ($scope.results2[num].username !== 'undefined') {
$scope.data3 = res3.data;
var obj = {
num: num,
id: $scope.results2[num].id,
title: $scope.results2[num].title,
username: $scope.results2[num].username,
email: $scope.data3[0].email
};
$scope.results3.push(obj);
}
});
}
You can see the entire thing at http://plnkr.co/edit/CjXt7E?p=preview -- it shows the output of each step (results1, results2, results3). Hopefully I won't have to do something this crazy again, but just in case, maybe this will help someone. Or maybe it'll cause someone to leap up and tell me everything I did wrong, but that'd be fine, too. Gotta learn somehow. :)