Angular.foreach asynchronous callback not working

Question

I am trying to detect if the foreach statement is completed together with the statements inside the foreach. From my research, many are asking to use promises. As I am implemented it, it is not executing the way I was expecting.

var uploadUrl = "/api/upload";
$('#add_product').closeModal();
 var promises = angular.forEach(vm.images_selected, function(value , key){
    return File_Upload.uploadFileToUrl(value, uploadUrl)
    .success(function(result){
        vm.images_selected_uploaded.push(result);
        console.log('here')
    });
})
$q.all(promises).then(function () {
    console.log('there')
    console.log(vm.images_selected_uploaded)
})

From the code above (let's say the value length is 2, the output will be

there
here
here

What I really wanted was here here there. What am I missing here?

.forEach should be .map (assuming angular.forEach/angular.map are similar functionally to array.prototype.forEach/array.prototype.map ... hmmm, no angular.map ... — Jaromanda X
– Jaromanda X, Commented Dec 9, 2015 at 9:25

Jaromanda X · Accepted Answer · 2015-12-09 09:40:39Z

6

First problem, angular.forEach returns a reference to the first argument, so they wont be the promises you're looking for

Second problem, angular doesn't have a drop in replacement for .map

If you save the promises in the promises array, you can do this

var uploadUrl = "/api/upload";
$('#add_product').closeModal();
var promises = [];
angular.forEach(vm.images_selected, function(value , key){
    promises.push(File_Upload.uploadFileToUrl(value, uploadUrl)
        .success(function(result){
            vm.images_selected_uploaded.push(result);
            console.log('here')
        })
    );
})
$q.all(promises).then(function () {
    console.log('there')
    console.log(vm.images_selected_uploaded)
});

answered Dec 9, 2015 at 9:40

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

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

Comments

Arg0n · Accepted Answer · 2015-12-09 09:48:27Z

2

Something like this:

var uploadUrl = "/api/upload";
$('#add_product').closeModal();
var promises = [];
angular.forEach(vm.images_selected, function(value , key){
    promises.push(File_Upload.uploadFileToUrl(value, uploadUrl));
});
$q.all(promises).then(function (results) {
    for(var i = 0; i < results.length; i++){
       var result = results[i];
       vm.images_selected_uploaded.push(result);
       console.log('here');
    }
    console.log('there');
    console.log(vm.images_selected_uploaded);
})

OR Perhaps like this:

var uploadUrl = "/api/upload";
$('#add_product').closeModal();
 var promises = [];
 angular.forEach(vm.images_selected, function(value , key){
    var promise = File_Upload.uploadFileToUrl(value, uploadUrl);
    promise.success(function(result){
        vm.images_selected_uploaded.push(result);
        console.log('here');
    });
    promises.push(promise);
})
$q.all(promises).then(function () {
    console.log('there');
    console.log(vm.images_selected_uploaded);
})

Both is untested btw.

edited Dec 9, 2015 at 9:48

answered Dec 9, 2015 at 9:26

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

10 Comments

Gene Lim Over a year ago

I think I have understand it. Thanks Arg0n! Your solution works like a charm!

Arg0n Over a year ago

And maybe more what you're aiming for.. This way they can finish in any order and you will get "here" in console before all is completed. The first is used more when you need all the results completed in order to do something.

Gene Lim Over a year ago

You are right, I will use the first because i need the results to be completed. Thanks

Jaromanda X Over a year ago

this doesn't look like it changes anything ... promises is the original vm.images_selected array, not an array of promises - unless angular documentation lies - but, it's apparently worked, so what do I know

Arg0n Over a year ago

@JaromandaX Could you provide a link to what you are reading?

|

Collectives™ on Stack Overflow

Angular.foreach asynchronous callback not working

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related