将多个http调用链接成一个循环

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. :)