Using _.each and $q promise to iterate widgets

Question

I have a pretty straight-forward problem where I'm :

1. Iterating through a series of dashboard "widgets" using _.each().
2. Calling a function to refresh the current widget, and returning a $q promise.

Now, my issue is that I would like each iteration to WAIT prior to continuing to the next iteration.

My first version was this, until I realized that I need to wait for updateWidget() to complete:

_.each(widgets, function (wid) {
  if (wid.dataModelOptions.linkedParentWidget) {
      updateWidget(wid, parentWidgetData);
  }
});

My second version is this one, which returns a promise. But of course, I still have the problem where the iteration continues without waiting :

_.each(widgets, function (wid) {
  if (wid.dataModelOptions.linkedParentWidget) {
    updateWidget(wid, parentWidgetData).then(function(data){
      var i = 1;
    });
  }
});

and the called function which returns a deferred.promise object (then makes a service call for widget data) :

function updateWidget(widget, parWidData) {
    var deferred = $q.defer();

    // SAVE THIS WIDGET TO BE REFRESHED FOR THE then() SECTION BELOW 
    $rootScope.refreshingWidget = widget;

    // .. SOME OTHER VAR INITIALIZATION HERE...       
    
    var url = gadgetDataService.prepareAggregationRequest(cubeVectors, aggrFunc, typeName, orderBy, numOrderBy, top, filterExpr, having, drillDown);
    
    return gadgetDataService.sendAggGetRequest(url).then(function (data) {
 var data = data.data[0];
 var widget = {};
 if ($rootScope.refreshingWidget) {       
     widget = $rootScope.refreshingWidget;
 }
 // BUILD KENDO CHART OPTIONS
 var chartOptions = chartsOptionsService.buildKendoChartOptions(data, widget);                

 // create neOptions object, then use jquery extend()
 var newOptions = {};
 $.extend(newOptions, widget.dataModelOptions, chartOptions);
 widget.dataModelOptions = newOptions;

 deferred.resolve(data);
    });
    
    return deferred.promise;
}

I would appreciate your ideas on how to "pause" on each iteration, and continue once the called function has completed.

thank you, Bob

******* UPDATED ************

My latest version of the iteration code include $q.all() as follows :

// CREATE ARRAY OF PROMISES !!
var promises = [];
_.each(widgets, function (wid) {
  if (wid.dataModelOptions.linkedParentWidget) {
    promises.push(updateWidget(wid, parentWidgetData));
  }
});
$q.all(promises)
.then(function () {
  $timeout(function () {
    // without a brief timeout, not all Kendo charts will properly refresh.
    $rootScope.$broadcast('childWidgetsRefreshed');
  }, 100);              
});    

Answer 1

By chaining promises

The easiest is the following:

var queue = $q.when();
_.each(widgets, function (wid) {
  queue = queue.then(function() {
    if (wid.dataModelOptions.linkedParentWidget) {
      return updateWidget(wid, parentWidgetData);
    }
  });
});
queue.then(function() {
  // all completed sequentially
});

Note: at the end, queue will resolve with the return value of the last iteration

If you write a lot of async functions like this, it might be useful to wrap it into a utility function:

function eachAsync(collection, cbAsync) {
  var queue = $q.when();
  _.each(collection, function(item, index) {
    queue = queue.then(function() {
      return cbAsync(item, index);
    });
  });
  return queue;
}

// ...
eachAsync(widgets, function(wid) {
  if (wid.dataModelOptions.linkedParentWidget) {
    return updateWidget(wid, parentWidgetData);
  }
}).then(function() {
  // all widgets updated sequentially
  // still resolved with the last iteration
});

These functions build a chain of promises in the "preprocessing" phase, so your callback is invoked sequentially. There are other ways to do it, some of them are more efficient and use less memory, but this solution is the simplest.

By delayed iteration

This method will hide the return value even of the last iteration, and will not build the full promise chain beforehands. The drawback is that, it can be only used on array like objects.

function eachAsync(array, cbAsync) {
  var index = 0;
  function next() {
    var current = index++;
    if (current < array.length) {
      return $q.when(cbAsync(array[current], current), next);
    }
    // else return undefined
  }
  // This will delay the first iteration as well, and will transform
  // thrown synchronous errors of the first iteration to rejection.
  return $q.when(null, next); 
}

This will iterate over any iterable:

function eachAsync(iterable, cbAsync) {
  var iterator = iterable[Symbol.iterator]();
  function next() {
    var iteration = iterator.next();
    if (!iteration.done) {
      // we do not know the index!
      return $q.when(cbAsync(iteration.value), next);
    } else {
      // the .value of the last iteration treated as final
      // return value
      return iteration.value;
    }
  }
  // This will delay the first iteration as well, and will transform
  // thrown synchronous errors of the first iteration to rejection.
  return $q.when(null, next); 
}

Keep in mind that these methods will behave differently when the collection changes during iteration. The promise chaining methods basically build a snapshot of the collection at the moment it starts iteration (the individual values are stored in the closures of the chained callback functions), while the latter does not.

Answer 2

Instead of trying to resolve each promise in your _.each(), I would build out an array of promises in your _.each to get an array like:

promises = [gadgetDataService.sendAggGetRequest(url1), gadgetDataService.sendAggGetRequest(url2)....]

Then resolve them all at once, iterate through the results and set your models:

$q.all(promises).then(function(results){ // iterate through results here })