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

Is there a way to detect and intercept M-SEARCH requests in Express?

The Print Preview Displays No Content When an External Stylesheet Reference is Included in the Printable HTML Content

Issue with Angular controller not refreshingalternatively:Angular

Bringing in Node Package in Angular

The ability to submit a conversation chat is currently

Incorporate PNG files with pre-defined labels in a React element

Passing asynchronous data from method1 to method2 without impacting the functionality of the script responsible for fetching the asynchronous data in method1

Creating efficient computed properties in React: a step-by-step guide

Where can content-tag and main-tag be found in vue-virtual-scroller?

"Exploring the integration of video.js with React Hooks: A step-by-step

A collection of jQuery objects that consist of various DOM elements as their properties

Utilizing the Bing Translation API to translate an entire webpage

Issue: Unable to create the restangular module because: the variable '_' is not defined

Adding data to MongoDB using Mongoose and Angular

Choose the option for overseeing safaris

In Vue, the concept of using the debounce method is not clearly defined

The function Router.use() needs a middleware function, but instead, it received an undefined

Accessing the SQL database using Cypress

Determining the file size of an HTML and JavaScript webpage using JavaScript

What is the best way to showcase the reading from a stopwatch on my screen?