I am trying to detect if the foreach statement is pleted 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?

I am trying to detect if the foreach statement is pleted 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?

• javascript
• angularjs
• foreach
• promise

• You should move success to then in $q.all(). – Arg0n Commented Dec 9, 2015 at 9:24
• 2 .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 Commented Dec 9, 2015 at 9:25

2 Answers 2

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)
});

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.