Ajax call within a loop using $resource

Question

I'm in difficulty doing this operation correctly.

I have an Order and for every item I have to get the data from the API, what I'm doing is this:

if ($scope.order.order_items.length > 0) {
    var itemArray = [];
    for (var i = 0; i < $scope.order.order_items.length; i++) {
      var itemId = $scope.order.order_items[i].id;
      Items.get({
        itemId: itemId
      }).$promise.then(function (data) {
        itemArray.push(data.item);
      });
    }
    $scope.order.order_items = itemArray;
  }

The API receive the request and send the data back but the promise do not return anything...

One more error here is from jshint: Don't make functions within a loop.

It will be nice to solve both the issues for me... I tried to create an external function but having the same issue not returning data I don't know if I was doing it well, the external function I was doing is:

function addItem(id) {
    Items.get({
      itemId: id
    }).$promise.then(function (data) {
      console.log(data);
      return data.item;
    });
  }

score 2 · Accepted Answer · edited Jun 16 '17 at 07:28

You are making an asynchronous call from the code and thinking that it will work like synchronously. As you are assigning itemArray to $scope.order.order_items outside the factory, at that time itemArray is blank. Before making that assignment you need to ensure that all the ajax call the each item has been completed or not. You could use $q.all for such scenario. $q.all need an promise array & it will call the .then function when all the promise gets resolved.

if ($scope.order.order_items.length > 0) {
    var itemArray = [], promiseArray = [];
    for (var i = 0; i < $scope.order.order_items.length; i++) {
      var itemId = $scope.order.order_items[i].id;
      var currentPromise = Items.get({
        itemId: itemId
      }).$promise.then(function (data) {
         itemArray.push(data.item);
         return true; //returning dummy value from promise.
      });
      promiseArray.push(currentPromise); //creating promise array
    }
    $q.all(promiseArray) //giving promise array input.
    .then(function(data){ //success will call when all promises get resolved.
        $scope.order.order_items = itemArray;
    },function(error){
        console.log("Error occured")
    });

}

Your solution is working fine except for the jshint error: `Don't make functions within a loop.` I'm trying to create one to let it work without success yet... :( — Ayeye Brazo, Oct 04 '15 at 00:59

score 0 · Answer 2 · answered Oct 03 '15 at 17:58

I would avoid reading and writing to the same array and instead use another array for the actual items.

As Resource returns an instance that gets filled on success you should be fine adding the instances to the scope directly. With that you reduce your code a lot and also remove the jshint warning.

if ($scope.order.order_items.length > 0) {
  $scope.order.order_items_with_data = [];

  for (var i = 0; i < $scope.order.order_items.length; i++) {
    var itemId = $scope.order.order_items[i].id;

    $scope.order.order_items_with_data.push(Items.get({itemId: itemId}));
  }
}

Ajax call within a loop using $resource

2 Answers2