Promise in foreach with angularjs

Question

I have a problem with a promise,

$scope.refreshProject = function () {
    project.getAll().then(function(results) {
        angular.forEach(results, function(project) {
            project_path = project.path;
            project_file = project.file;
            project_id = project.id;

            console.log(project);
            console.log('http://' + project_path + '/' + project_file);

            $http.get('http://' + project_path + '/' + project_file)
                .then(function(res){
                    var project = new Project();
                    project.update(project_id, { 'content': res.data });
                });

        });

        $scope.refresh();
    });
};

My $http.get doesn't work, the

console.log('http://' + project_path + '/' + project_file);

return

'http:///'

my variables are empties.

project.model.js

Project.prototype.getAll = function () {
    return ProjectService.getAll();
};

project.service.js

this.getAll = function (params) {
    var projects = [];
    return db.selectAll('projects').then(function(results) {
        for(var i=0; i < results.rows.length; i++){
            projects.push(results.rows.item(i));
        }
        return projects;
    });
};

How can I execute my $http request when I have the params from project.path and project.file are ok ?

SOLVED

    project.getAll().then(function(results) {
        angular.forEach(results, function(project) {
            (function(project) {
                var project_id = project.id;

                if (project.path) {
                    var promise = $http.get(project.path + '/' + project.file)
                        .then(function(res){
                            var project = new Project();
                            console.log(res.data);
                            project.update(project_id, { 'content': res.data });
                        });
                }

                promises.push(promise);
            })(project);
        });

        $q.all(promises).then(function() {
            $scope.refresh();
            console.log('refresh() ok');
        });
    });

It's not good idea to send request inside loop.Your performance will be very low, sometimes your application can crash, that's why you need to send the result (as array) in 1 http request — Hazarapet Tunanyan, Apr 30 '16 at 10:32

Daniel Beck · Answer 1 · 2016-04-29T13:17:50.213

First, check that results contains the correct data -- those console.logs being empty suggests that it isn't, and that projectService.getAll() isn't returning what you expect.

Assuming that is working as expected, you have three separate variables all named "project":

    project.getAll().then(function(results) {
//  ^^^^^^^ 1
        angular.forEach(results, function(project) {
//                                        ^^^^^^^ 2
            project_path = project.path;
//                         ^^^^^^^ 2
//          ...
            $http.get('http://' + project_path + '/' + project_file).then(function(res){
                var project = new Project();
//                  ^^^^^^^ 3

Off the top of my head I honestly have no idea which of those is overwriting which of the others, especially since there's async code involved -- but I'd bet a nickel that at least one of them must be.

If nothing else changing those to different names will make maintenance and debugging easier...

score 0 · Answer 2 · edited May 23 '17 at 12:31

Wild guess: depending on how angular.forEach works, wrapping your callback like so might do it. (otherwise all callbacks might be called with the last version of project, more detail here JavaScript closure inside loops – simple practical example)

$scope.refreshProject = function () {
  project.getAll().then(function(results) {
    angular.forEach(results, function(project) {
      (function(project) {
        project_path = project.path;
        project_file = project.file;
        project_id = project.id;

        console.log(project);
        console.log('http://' + project_path + '/' + project_file);

        $http.get('http://' + project_path + '/' + project_file)
          .then(function(res){
            var project = new Project();
            project.update(project_id, { 'content': res.data });
          });
      })(project);
    });

    $scope.refresh();
  });
};

Promise in foreach with angularjs

2 Answers2