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
– Hazarapet Tunanyan, Commented Apr 30, 2016 at 10:32

Daniel Beck · Accepted Answer · 2016-04-29 13:17:50Z

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...

Community · Accepted Answer · 2017-05-23 12:31:44Z

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

Collectives™ on Stack Overflow

Promise in foreach with angularjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related