Reached the maximum number of iterations for Angular 10 $digest() function

Question

Reached the maximum number of iterations for Angular 10 $digest() function

Currently, I am following a MEAN stack tutorial on Thinkster and encountering an issue with my Angular factory service.

Angular.js:11598 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: []

Here is a snippet from my app.js file:

app.factory('posts', ['$http', function($http){
    var o = {
        posts: []
    };
    o.getAll = function() {
        return $http.get('/posts').success(function(data){
            console.log(data)
            angular.copy(data, o.posts);
        });
    };
    return o;
}]);

I also have route provider configurations in my config file:

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '/home.html',
        controller: 'MainCtrl',
        resolve: {
            post: ['$stateParams', 'posts', function($stateParams, posts) {
                return posts.get($stateParams.id);
            }]
        }

    })

I am unsure what the issue might be...

Any assistance would be greatly appreciated. Thank you in advance!

javascript angularjs

Answer 1

Answer №1

.success has been deprecated, so I will be using then instead.

It seems like this is the message you intended to convey.

app.factory('posts', ['$http', function($http){
    var o = {}; 
    o.get = function(id){
        return $http.get('/posts/'+id).then(function(response){
            return response.data;
        });
    }
    o.getAll = function() {
        return $http.get('/posts').then(function(response){
           return response.data;
        });
    };
    return o;
}]);


 resolve: {
        post: ['$stateParams', 'posts', function($stateParams, posts) {
            return posts.get($stateParams.id);
        }]
    }

// usage of the factory in controller : 
    posts.getAll().then(function(posts){
         $scope.allPosts = posts;
    })
    posts.get(id).then(function(post){
        $scope.post = post;
    })

Here are some key points:

then/ success are chainable; remember to use the return statement to ensure that the next chain gets the data it needs.
It's unclear where you got your
```
return posts.get($stateParams.id);
```
line from, so I made a relevant addition for clarity.

Answer 2

.success has been deprecated, so I will be using then instead.

It seems like this is the message you intended to convey.

app.factory('posts', ['$http', function($http){
    var o = {}; 
    o.get = function(id){
        return $http.get('/posts/'+id).then(function(response){
            return response.data;
        });
    }
    o.getAll = function() {
        return $http.get('/posts').then(function(response){
           return response.data;
        });
    };
    return o;
}]);


 resolve: {
        post: ['$stateParams', 'posts', function($stateParams, posts) {
            return posts.get($stateParams.id);
        }]
    }

// usage of the factory in controller : 
    posts.getAll().then(function(posts){
         $scope.allPosts = posts;
    })
    posts.get(id).then(function(post){
        $scope.post = post;
    })

Here are some key points:

then/ success are chainable; remember to use the return statement to ensure that the next chain gets the data it needs.
It's unclear where you got your
```
return posts.get($stateParams.id);
```
line from, so I made a relevant addition for clarity.

Reached the maximum number of iterations for Angular 10 $digest() function

Answer №1

Similar questions

directive ng-click not responding

Unleash the power of jQuery to leverage two different input methods

Tips on using the ref attribute in Vue.js to focus on an input element

Serious issue: a dependency request is an expression (Warning from Angular CLI)

Concealing the rear navigation button within the material carousel

Executing Selenium WebDriver to interact with a hidden element

Load a JSON file into the app.js of your project

Top strategies for avoiding element tampering

The MVC execution sequence: Controller initialization happening after Ajax call

What is the best way to check the difference between the current date and time with another date and

The new pop-up window appears smaller than expected in Internet Explorer

Float over a specific line in a drawing

Enhancing the templateUrl with additional value in AngularJS and PHP

Is the array empty once the functions have been executed?

Utilizing JavaScript to retrieve data from a JSON-parsed SOAP envelope

Is relying on getState in Redux considered clunky or ineffective?

Preserving variable scope in JavaScript even after defining a function

Automatic logoff will occur after 15 minutes of inactivity in C# programming language

Pressing a key once causing two actions when managing content in a separate window

Is it possible to dynamically add an id or class to an element using document.createElement in JavaScript?