What should be my approach for angularjs nested ajax calls [loop within a loop]?

Question

|        |     |            |  A1  |            |     |                   |
| AJAX 1 | --> |  Response1 |  --> |   AJAX 2   | --> | Response2 (Final) |
|        |     | [ARRAY]-A1 |      | A1 indices |     |                   |

So, the problem is that I've to show Response2 in my DOM but AJAX 2 is dependent on Response1. What would be the best approach for such a scenario? I'm trying to do it with deferred promises in UI Router resolve object but it seems that the resolve is not being executed in config.

What I want to achieve - I'm getting an array (Array 1) from AJAX1 as response. I want to run AJAX calls on each of the elements of that Array 1 and store the response from each of these calls in another array(Array 2). Finally return that Array 2 so as to be displayed in the DOM.

EDITED (Updated with code)

myApp.factory('Factory1',function($q, $rootScope){
   var deferred = $q.defer();
   var tempFactory = {};
   tempFactory.function1 = function(){
      (GAPI AJAX CALL)
      .execute(function(response){
         $rootScope.$apply(function(){
            var res = response.KEY1;  //Array
            deferred.resolve(response);
            return res;
         });
      });
      return deferred.promise;
   };
   return tempFactory;
}

myApp.factory('Factory2',function($q, $rootScope, res){
   var deferred = $q.defer();
   var tempFactory = {};
   tempFactory.function2 = function(res){
      (GAPI AJAX CALL)    //res as an argument
      .execute(function(response){
         var resultLength = res.length;
         $rootScope.$apply(function(){
            for (i=0; i <res.length; i++){
               resultLength -= 1;
               var result = [];
               result.push(response.KEY2[i]);
               if (resultLength <= 1){
                  deferred.resolve(response);
                  return result;
               }
            }
         });
      });
      return deferred.promise;
   };
   return tempFactory;
}

myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/");
    $stateProvider
       .state('state1',{
       url: '/state',
       templateUrl:'partials/user.html',
       resolve: {
           videos: function(Factory1, Factory2){
               console.log('hi there');
               return Factory1.function1()
               .then(Factory2.function2);
           }
       },
       controller:'Controller1',
    });
}]);

What is the real problem? Is there any exception thrown? Or it just that the result is somehow incorrect? — runTarm
– runTarm, Commented Aug 2, 2014 at 9:32
Then please elaborate more on what exactly is the it's breaking somewhere. Also what you are expecting and the actual result of the current implementation. I could't help without knowing what you are trying to acheive. — runTarm
– runTarm, Commented Aug 2, 2014 at 9:40

runTarm · Accepted Answer · 2014-08-02 10:15:30Z

You could loop through and fire an AJAX call for each element of the result of the first AJAX call. Then wait for all the calls to complete by counting.

I assume your data is in response.KEY1 and response.KEY2.

myApp.factory('Factory1', function($q, $rootScope) {
  var tempFactory = {};

  tempFactory.function1 = function() {
    var deferred = $q.defer();

    (GAPI AJAX CALL)
    .execute(function(response) {
      $rootScope.$apply(function () {
        deferred.resolve(response.KEY1);
      });
    });

    return deferred.promise;
  };

  return tempFactory;
});

myApp.factory('Factory2', function($q, $rootScope) {
  var tempFactory = {};

  tempFactory.function2 = function(res) {
    var deferred = $q.defer();
    var result = [];
    var count = 0;

    angular.forEach(res, function (r, i) {
      (GAPI AJAX CALL) // r as an argument
      .execute(function (response) {
        result[i] = response.KEY2;

        count++;
        if (count === res.length) {
          $rootScope.$apply(function() {
            deferred.resolve(result);
          });
        }
      });
    });

    return deferred.promise;
  };

  return tempFactory;
});

Hope this helps.

Collectives™ on Stack Overflow

What should be my approach for angularjs nested ajax calls [loop within a loop]?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related