For Each loop with promises not working in angularjs

Question

The "types" parameter being passed in is in the format ["hourAverage","hourMedian","dayAverage","dayMedian","weekAverage","weekMedian","monthAverage","monthMedian"]

Source:

$scope.buildCharts = function(types){
    var deferred = $q.defer();
    var promises = [];

    types.forEach(function(type){
                $scope.prepareData(type);
                deferred.resolve([
                {
                    title: type,
                    curveType: 'function',
                    legend: { position: 'bottom' }
                },type]);
                promises.push(deferred.promise);
    });
    return $q.all(promises);
};

Output:

[
  [
    {
      "title": "hourAverage",
      "curveType": "function",
      "legend": {
        "position": "bottom"
      }
    },
    "hourAverage"
  ],
  [
    {
      "title": "hourAverage",
      "curveType": "function",
      "legend": {
        "position": "bottom"
      }
    },
    "hourAverage"
  ],
  [
    {
      "title": "hourAverage",
      "curveType": "function",
      "legend": {
        "position": "bottom"
      }
    },
    "hourAverage"
  ],
  [
    {
      "title": "hourAverage",
      "curveType": "function",
      "legend": {
        "position": "bottom"
      }
    },
    "hourAverage"
  ],
  [
    {
      "title": "hourAverage",
      "curveType": "function",
      "legend": {
        "position": "bottom"
      }
    },
    "hourAverage"
  ],
  [
    {
      "title": "hourAverage",
      "curveType": "function",
      "legend": {
        "position": "bottom"
      }
    },
    "hourAverage"
  ],
  [
    {
      "title": "hourAverage",
      "curveType": "function",
      "legend": {
        "position": "bottom"
      }
    },
    "hourAverage"
  ],
  [
    {
      "title": "hourAverage",
      "curveType": "function",
      "legend": {
        "position": "bottom"
      }
    },
    "hourAverage"
  ]
]

trincot · Accepted Answer · 2017-04-05 07:58:34Z

2

This illustrates that a promise can only resolve with one value. Any further call of resolve on the same deferred object will have no effect. That is why you get the first object as value over and over again. This is required behaviour by the Promises/A+ specifications, point 2.1.2 (emphasis mine):

2.1.2 When fulfilled, a promise:

2.1.2.1 must not transition to any other state.

2.1.2.2 must have a value, which must not change.

Of course, if it would have been allowed to change the value of a promise, then you still would not have had the desired result, as then the result would have had a repetition of the last object value .

To solve this, create a new deferred object within the loop, so that you always resolve a new promise:

Move this:

var deferred = $q.defer();

Into the forEach callback:

types.forEach(function(type){
    var deferred = $q.defer();
    // etc...

edited Apr 5, 2017 at 7:58

answered Apr 5, 2017 at 7:37

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

For Each loop with promises not working in angularjs

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