Modifying Angular scope variables using forEach

Question

Given the following data on the server:

people.json:

{
  "Bill": "Bill the Man",
  "Jane": "Jane Doe",
  "Jack": "Jack the Ripper"
}

groups.json:

[
   ["Bill", "Jack"],
   ["Jane", "Jack"]
]

I import it in controllers.js:

var websiteApp = angular.module('websiteApp', []);

websiteApp.controller('websiteCtrl', function ($scope, $http) {
  // import data
  $http.get('people.json').success(function (data) {
    $scope.people = data;
  });
  $http.get('groups.json').success(function (data) {
    $scope.groups = data;
  });

  // fill groups with people data
  $scope.groups.forEach(function (group, i) {
    group.forEach(function (person, j) {
      $scope.groups[i][j] = $scope.people[person];
    });
  });
});

And then I use this with the following template:

<ul>
  <li ng-repeat="group in groups">
    <ul><li ng-repeat="person in group">{{person}}</li></ul>
  </li>
</ul>

I expected to get a list of lists of names from people.json, but I get the first names as in groups.json. Some further investigation with console.log made it clear that the forEach loops are not executed. Further trials with local variables to store the data before assigning to the scope also did not succeed.

How should I approach this issue? What am I not understanding about how Angular works? (N.B.: I am new to Angular and Javascript frameworks in general.)

both of the $http.get calls are async. So, there will be no data yet when the forEach runs. — Davin Tryon
– Davin Tryon, Commented Feb 12, 2015 at 11:17
The foreach is being hit before the .success of each http call due to the async nature — Christian Phillips
– Christian Phillips, Commented Feb 12, 2015 at 11:18

Christian Phillips · Accepted Answer · 2015-02-12 11:40:17Z

2

Try something like this...

var websiteApp = angular.module('websiteApp', []);

websiteApp.controller('websiteCtrl', function($scope, $http, $q) {
    // import data

    getPeopleAndGroups = function() {

        var people = $http.get('people.json');
        var groups = $http.get('groups.json');

        return $q.all([people, groups]);
    }


    getPeopleAndGroups().then(function(data) {
        var people = data[0].data;
        var groups = data[1].data;

        // fill groups with people data
        groups.forEach(function(group, i) {
            group.forEach(function(person, j) {
                $scope.groups[i][j] = $scope.people[person];
            });
        });
    })
});

Using the $q library, you can return a promise, so this should help you out - I cant validate it as I'm in work, but it should get you on track. Take a look at the Angular q Library

edited Feb 12, 2015 at 11:40

answered Feb 12, 2015 at 11:31

Christian Phillips

18.8k8 gold badges55 silver badges85 bronze badges

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

Comments

Naeem Shaikh · Accepted Answer · 2015-02-12 11:23:40Z

1

$http is asynchronous in nature, you need to call the foreach, when both ajax requests are completed. For example:

var websiteApp = angular.module('websiteApp', []);

websiteApp.controller('websiteCtrl', function ($scope, $http) {
    // import data
    $http.get('people.json').success(function (data) {
        $scope.people = data;
        $http.get('groups.json').success(function (data) {
            $scope.groups = data;
            // fill groups with people data
            $scope.groups.forEach(function (group, i) {
                group.forEach(function (person, j) {
                    $scope.groups[i][j] = $scope.people[person];
                });
            });

        });
    });



});

answered Feb 12, 2015 at 11:23

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

Collectives™ on Stack Overflow

Modifying Angular scope variables using forEach

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related