SyntaxFix

[angularjs] Angularjs $q.all

In javascript there are no block-level scopes only function-level scopes:

Read this article about javaScript Scoping and Hoisting.

See how I debugged your code:

var deferred = $q.defer();
deferred.count = i;

console.log(deferred.count); // 0,1,2,3,4,5 --< all deferred objects

// some code

.success(function(data){
   console.log(deferred.count); // 5,5,5,5,5,5 --< only the last deferred object
   deferred.resolve(data);
})
  • When you write var deferred= $q.defer(); inside a for loop it's hoisted to the top of the function, it means that javascript declares this variable on the function scope outside of the for loop.
  • With each loop, the last deferred is overriding the previous one, there is no block-level scope to save a reference to that object.
  • When asynchronous callbacks (success / error) are invoked, they reference only the last deferred object and only it gets resolved, so $q.all is never resolved because it still waits for other deferred objects.
  • What you need is to create an anonymous function for each item you iterate.
  • Since functions do have scopes, the reference to the deferred objects are preserved in a closure scope even after functions are executed.
  • As #dfsq commented: There is no need to manually construct a new deferred object since $http itself returns a promise.

Solution with angular.forEach:

Here is a demo plunker: http://plnkr.co/edit/NGMp4ycmaCqVOmgohN53?p=preview

UploadService.uploadQuestion = function(questions){

    var promises = [];

    angular.forEach(questions , function(question) {

        var promise = $http({
            url   : 'upload/question',
            method: 'POST',
            data  : question
        });

        promises.push(promise);

    });

    return $q.all(promises);
}

My favorite way is to use Array#map:

Here is a demo plunker: http://plnkr.co/edit/KYeTWUyxJR4mlU77svw9?p=preview

UploadService.uploadQuestion = function(questions){

    var promises = questions.map(function(question) {

        return $http({
            url   : 'upload/question',
            method: 'POST',
            data  : question
        });

    });

    return $q.all(promises);
}

Examples related to angularjs

• AngularJs directive not updating another directive's scope • ERROR in Cannot find module 'node-sass' • CORS: credentials mode is 'include' • CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response • WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400 • Print Html template in Angular 2 (ng-print in Angular 2) • $http.get(...).success is not a function • Angular 1.6.0: "Possibly unhandled rejection" error • Find object by its property in array of objects with AngularJS way • Error: Cannot invoke an expression whose type lacks a call signature

Examples related to promise

• Axios handling errors • typescript: error TS2693: 'Promise' only refers to a type, but is being used as a value here • Syntax for async arrow function • Angular 2: How to call a function after get a response from subscribe http.post • How to use fetch in typescript • Returning Promises from Vuex actions • Use async await with Array.map • Getting a UnhandledPromiseRejectionWarning when testing using mocha/chai • using setTimeout on promise chain • Why is my asynchronous function returning Promise { <pending> } instead of a value?

Examples related to q

• How do you properly return multiple values from a Promise? • How do I tell if an object is a Promise? • What's the difference between returning value or Promise.resolve from then() • Resolve promises one after another (i.e. in sequence)? • return value after a promise • Aren't promises just callbacks? • Angularjs $q.all