CODEWITHSUNDEEP
javascriptangularjs
kicki
kicki

Reputation: 3

Problems with ng-repeat, $scope, $http

im working with AnuglarJS 1.4.8. I want give out the data with ng-repeat.

I have the following problem and i have no more ideas to solve it. I tried the solutions from AnuglarJS but i doesnt work.

Could someone help me please.

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Watchers fired in the last 5 iterations: []

http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5D

Service:

.service('database', function ($http) {
  self = this;
  this.url = 'http://localhost:3001';
  this.getPersons = function(cb){
      return $http({
        method: 'GET',
        url: self.url + '/loadperson'
      }).success(function (data) {
        cb(data);
      });      
    };   
});

Controller:

angular.module('myApp')
 .controller('personCtrl', function ($scope, database) {
   $scope.people = function(){
      return{
        getAll: function () {
          database.getPersons(function (data) {
            return data;
            // should return a Object(id, name)
         });
       }
    }
 };

HTML:

<div ng-repeat="people in people().getAll()">
    <p>{{people.name}}</p>
</div>

Upvotes: 0

Views: 123

Answers (4)

MayK
MayK

Reputation: 1329

Have you tried making a separate function to fetch the entities from the data base, then put this data in a variable, that you then will pass to the ngRepeat ?

your controller

angular.module('myApp')
 .controller('personCtrl', function ($scope, database) {
   $scope.people = [];
   $scope.getPeople = function(){
      return{
        getAll: function () {
          database.getPersons(function (data) {
            $scope.people = data;
            return;
            // should return a Object(id, name)
         });
       }
    }
   //load the list of people
   $scope.getPeople();
 };

your view

<div ng-repeat="person in people">
    <p>{{person.name}}</p>
</div>

Upvotes: 0

Andrew Shepherd
Andrew Shepherd

Reputation: 45252

You've made a common error in javascript when running asynchronous queries. The pattern goes:

function outerFunction() {
    invokeInnerFunction(function() {
       return 3;
    }
}

What does outerFunction() return? An error is to think it returns 3, but the answer is actually that outerFunction doesn't return anything.

Likewise, in your example getAll isn't actually returning anything; it's just calling an asynchronous method. This asynchronous method invoked $http, which triggers a digest loop which will result in getAll being called again, and so on for ever. Be thankful that angular can detect this problem.

You only want to call the database query once on startup, and initialize the list of people. Simply store this list in a variable so it won't query the database again on the next digest loop.

angular.module('myApp')
 .controller('personCtrl', function ($scope, database) {
   $scope.allPeople = [];
   database.getPersons(function(data) {
      $scope.allPeople = data;
   });
 };

An then for your HTML

<div ng-repeat="people in allPeople">
    <p>{{people.name}}</p>
</div>

Much simpler.

Upvotes: 0

Gaurav Gandhi
Gaurav Gandhi

Reputation: 3201

You are missing the non-blocking way of javascript. Try following, it should work Controller:

angular.module('myApp')
 .controller('personCtrl', function ($scope, database) {
   $scope.loadPeoples = function(){
      return{
        getAll: function () {
          database.getPersons(function (data) {
            $scope.peoples = data;
            // should return a Object(id, name)
         });
       }
    }
 };
 $scope.loadPeoples();
})

HTML:

<div ng-repeat="people in peoples">
    <p>{{people.name}}</p>
</div>

Upvotes: 1

elTomato
elTomato

Reputation: 333

Try that.

Service:

.service('database', function ($http) {
  self = this;
  this.url = 'http://localhost:3001';
  this.getPersons = function(){
      return $http({
        method: 'GET',
        url: self.url + '/loadperson'
      });      
    };   
});

Controller:

angular.module('myApp')
.controller('personCtrl', function ($scope, database) {
   database.getPerson().success(function(data) {
      $scope.people = data;
   });
});

HTML:

<div ng-repeat="person in people">
    <p>{{person.name}}</p>
</div>

You should also be aware that you shouldn't return each time a NEW array for iterating. Otherwise angular will keep calling that function for retrieving a "stable" value for the array.

Upvotes: 0

Related Questions