The results returned by AngularJS $q.all() come back as empty

Question

The results returned by AngularJS $q.all() come back as empty

Currently, I am working on implementing a $q.all function to execute multiple functions and then collect all the outputs in a function connected to the .then method at the end.

Even though it seems like the promises are being called in the correct sequence and the $all .then method is being executed at the end, the results variable is returning an array of null values (one for each promise in the $q.all).

You can find the JS Fiddle example at http://jsfiddle.net/QqKuk/120/, and I am using angular 1.0.1.

Below is a simplified version of the code I have:

This is my basic HTML structure, displaying some debug text and output:

<div ng-controller="MyCtrl">
    <p>{{fromThen}}</p>
    <p>{{fromThen2}}</p>
    <p>{{runOrder}}</p>
</div>

And here is my controller, where logOne, logTwo, and logThree are not identical functions:

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $q, $timeout) {

var logOne = function(value) {
    $scope.fromThen = $scope.fromThen + value;
    var deffered = $q.defer();
    deffered.promise.then(function() {
            $scope.runOrder = $scope.runOrder + '.logOne()';
            $scope.fromThen = $scope.fromThen + value.toUpperCase();
            deffered.resolve(value);
            return deffered.promise;
    });

    deffered.resolve();
};

var logTwo = function(value) {
    $scope.fromThen = $scope.fromThen + value;
    var deffered = $q.defer();
    deffered.promise.then(function() {
            $scope.runOrder = $scope.runOrder + '.logTwo()';
            $scope.fromThen = $scope.fromThen + value.toUpperCase();
            deffered.resolve(value);
            return deffered.promise;
    });

    deffered.resolve();
};

var logThree = function(value) {
    $scope.fromThen = $scope.fromThen + value;
    var deffered = $q.defer();
    deffered.promise.then(function() {
            $scope.runOrder = $scope.runOrder + '.logThree()';
            $scope.fromThen = $scope.fromThen + value.toUpperCase();
            deffered.resolve(value);
            return deffered.promise;
    });

    deffered.resolve();
};


$scope.fromThen = '';
$scope.fromThen2 = 'No Value';
$scope.runOrder = '';


$q.all([logOne('One'), logTwo('Two'), logThree('Three')])
                    .then(function(results) {
                        $scope.runOrder = $scope.runOrder + '.then';
                        $scope.fromThen2 = results;
                    });

}

The current output displays:

OneTwoThreeONETWOTHREE [null,null,null] .logOne().logTwo().logThree().then

It appears that the order of execution is correct, so I am puzzled as to why I am receiving null values in the result. Could it be that I am incorrectly using defer.resolve(value)?

I have reviewed other examples but have not been able to identify the issue causing the lack of a result.

Any assistance you can provide would be greatly appreciated. As this is my first post, any suggestions on additional information to include (or exclude) would also be helpful.

Thank you. Neil

javascript angularjs q

Answer 1

Answer №1

It seems like the issue lies in not returning promises from the log functions themselves for $q.all to properly execute. While you are resolving the promises and returning them, they are not being listened to anywhere. The functions within the .then calls are initiated by $q, and the return values should be sent to the resolution callbacks of the promises that the .then itself returns. Your promising functions need to have this structure:

var function = doSomthingDeferred(data) {
  var deferred = $q.defer();
  doSomethingDeferredWith(data).then(function(deferredResult) {
    var processedResult = processDeferredResult(deferredResult);
    deferred.resolve(processedResult);
  });
  return deferred.promise;
}

Alternatively

var function = doSomthingDeferred(data) {
  return doSomethingDeferredWith(data).then(function(deferredResult) {
    var processedResult = processDeferredResult(deferredResult);
    return processedResult;
  });
}

In your current scenario, when you doSomethingDeferredWith(data), the function is as follows:

function doSomethingDeferredWith(data) {
  var deferredMore = $q.defer();
  $scope.fromThen += data;
  deferredMore.resolve($scope.fromThen);

This action doesn't necessarily need to be deferred, as it completes immediately. However, if you were querying an $http-based service, then the deferredMore promise would be returned like so:

return deferredMore.promise;
}

After completing the above, you will receive some result as a parameter in a function referenced within the .then call on a promise, similar to the one returned from doSomethingDeferredWith:

doSomethingDeferredWith(data).then(function(deferredResult) {

Due to how $q operates, the call to doSomethingDeferredWith(data) returns a promise, and the function within .then is queued up but not executed until the current script loop ends. This means that all callbacks for resolved promises are run only after the call stack clears.

Your code currently does not return a promise in doSomethingDeferred or the log*** functions - instead, they return undefined. To resolve this, change your deffered.resolve(); calls to return deffered.promise; at the end of each log file. This way, the return values won't be undefined, but actual promises that $q can follow and execute the callback once all three promises have been resolved simultaneously. This will set your $scope.runFrom2 value to an array containing ['One','Two','Three'] as each individual promise resolves with its respective value.

tl;dr Version

Change the deffered.resolve(); calls at the end of each log file to return deffered.promise;

Answer 2

It seems like the issue lies in not returning promises from the log functions themselves for $q.all to properly execute. While you are resolving the promises and returning them, they are not being listened to anywhere. The functions within the .then calls are initiated by $q, and the return values should be sent to the resolution callbacks of the promises that the .then itself returns. Your promising functions need to have this structure:

var function = doSomthingDeferred(data) {
  var deferred = $q.defer();
  doSomethingDeferredWith(data).then(function(deferredResult) {
    var processedResult = processDeferredResult(deferredResult);
    deferred.resolve(processedResult);
  });
  return deferred.promise;
}

Alternatively

var function = doSomthingDeferred(data) {
  return doSomethingDeferredWith(data).then(function(deferredResult) {
    var processedResult = processDeferredResult(deferredResult);
    return processedResult;
  });
}

In your current scenario, when you doSomethingDeferredWith(data), the function is as follows:

function doSomethingDeferredWith(data) {
  var deferredMore = $q.defer();
  $scope.fromThen += data;
  deferredMore.resolve($scope.fromThen);

This action doesn't necessarily need to be deferred, as it completes immediately. However, if you were querying an $http-based service, then the deferredMore promise would be returned like so:

return deferredMore.promise;
}

After completing the above, you will receive some result as a parameter in a function referenced within the .then call on a promise, similar to the one returned from doSomethingDeferredWith:

doSomethingDeferredWith(data).then(function(deferredResult) {

Due to how $q operates, the call to doSomethingDeferredWith(data) returns a promise, and the function within .then is queued up but not executed until the current script loop ends. This means that all callbacks for resolved promises are run only after the call stack clears.

Your code currently does not return a promise in doSomethingDeferred or the log*** functions - instead, they return undefined. To resolve this, change your deffered.resolve(); calls to return deffered.promise; at the end of each log file. This way, the return values won't be undefined, but actual promises that $q can follow and execute the callback once all three promises have been resolved simultaneously. This will set your $scope.runFrom2 value to an array containing ['One','Two','Three'] as each individual promise resolves with its respective value.

tl;dr Version

Change the deffered.resolve(); calls at the end of each log file to return deffered.promise;

The results returned by AngularJS $q.all() come back as empty

Answer №1

Similar questions

Tips for labeling subplots in PLOTLY JS

Ensure that dynamic functions are accurately typed within a proxy utilizing TypeScript

Submitting a form using Ajax that was generated with the help of jQuery

Dynamically transform array values into an object

Creating an Angular table row that can expand and collapse using ng-bootstrap components is a convenient and

Incorporating YouTube links into calendar events for each specific date

Semantic UI dropdown field not displaying selected option text

Escape from an iframe with the help of a buster

Creating watercolor effects using JavaScript

Sorting by number or date in indexedDB may lead to unexpected results due to the

Obtaining parameter in angular 2

Expanding cards with Material-UI and React seems to be a challenge when using an expander

Struggling to right align Nav Items in Bootstrap React?

Iterate through the xml.documentElement in a loop

Modifying CSS content attribute in real-time

What is the best way to adjust an image's dimensions to fit a specific screen size without distorting it on a webpage?

What are alternative ways to add an HTML snippet to an existing file without relying on jQuery?

Managing and updating arrays in VueJS2: Conditionally push new items and update only if their properties have changed

Testing a custom Angular directive that encapsulates the functionality of SlickGrid

Retrieving and Showcasing information from a multidimensional array in a loop using React