AngularJS Error: $rootScope:infdig Infinite $digest Loop: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: []

Question

I am using AngularJS, I have a function in a service with nested promises:

this.getOfferStatus = function (offer) {

    if(offer.isDraft){
        return 'Draft';
    } else {
        this.isProcessed(offer).then(function (isProcessed) {
            if (isProcessed) {
                this.isAccepted(offer).then(function (isAccepted) {
                    if (isAccepted) {
                        if (isExpired(offer)) {
                            return 'Expired';
                        } else {
                            if (this.isActive(offer).then(function (isActive) {
                                    return 'Active';
                                }, function (err) {
                                    console.error(err);
                                }));
                            }
                        } else {
                            return 'Rejected';
                        }
                    }, function (err) {
                        console.error(err);
                    })
                } else {
                    return 'Pending';
                }
            }, function (err) {
                console.error(err);
            });
        }
    }
}

But, when I call this function in my controller, I get this error:

XHR finished loading: GET "http://localhost:8080/localbusiness/1/offers/Absolute". Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [] http://errors.angularjs.org/1.5.0/$rootScope/infdig?p0=10&p1=%5B%5D at angular.js:68 at Scope.$digest (angular.js:16702) at Scope.$apply (angular.js:16928) at done (angular.js:11266) at completeRequest (angular.js:11464) at XMLHttpRequest.requestLoaded (angular.js:11405) Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: []

isProcessed() function:

this.isProcessed = function (offer) { 
    var deferred = $q.defer();
    var LocalBusinessResource =
        $resource(apiService + '/offers/:id/processed', {id: '@id'});
    LocalBusinessResource.get({id: offer.id}, function (result) {
        deferred.resolve(result); 
    }, function (err) { 
        return $q.reject(err);
        alert('check your server connection ' + angular.toJson(err)); 
    });
    return deferred.promise; 
}

In my controller:

$scope.getStatus = function(offer){ 
    return offerService.getOfferStatus(offer);
};

Don't return anything before function end. return after all your function executed. — Arun
– Arun, Commented Apr 1, 2016 at 12:52
You're also trying to return bare strings instead of resolved promises; that isn't going to work either. — Daniel Beck
– Daniel Beck, Commented Apr 1, 2016 at 12:53
What does isProcessed() do? I suspect that is creating an infinite recursive loop. Also using the this keyword inside a fulfillment handler of a .then method won't work. The promise spec says that the this keyword should be undefined in strict mode and the global context in sloppy mode. — georgeawg
– georgeawg, Commented Apr 1, 2016 at 13:09
@georgeawg here is isProcessed() function: this.isProcessed = function (offer) { var deferred = $q.defer(); var LocalBusinessResource = $resource(apiService + '/offers/:id/processed', {id: '@id'}); LocalBusinessResource.get({id: offer.id}, function (result) { deferred.resolve(result); }, function (err) { return $q.reject(err); alert('check your server connection ' + angular.toJson(err)); }); return deferred.promise; } — jemlifathi
– jemlifathi, Commented Apr 1, 2016 at 13:26

Arun · Accepted Answer · 2016-04-01 13:29:38Z

Check this might solve your problem.

this.getOfferStatus = function (offer) {
   var parent = this;
    if(offer.isDraft){
        parent.setStatus('Draft')
    }else{
        this.isProcessed(offer).then(function (isProcessed) {
            if (isProcessed) {
                this.isAccepted(offer).then(function (isAccepted) {
                    if (isAccepted) {
                        if (isExpired(offer)) {
                            parent.setStatus('Expired')
                        } else {
                            if (this.isActive(offer).then(function (isActive) {
                                    parent.setStatus('Active')
                                }, function (err) {
                                    console.error(err);
                                }));
                        }
                    }else{
                        parent.setStatus('Rejected')
                    }
                }, function (err) {
                    console.error(err);
                }) 
            } else {
                parent.setStatus('Pending')
            }
        }, function (err) {
            console.error(err);
        });
    }

}

this.setStatus = function(status){
    $scope.status = status;
}

georgeawg · Accepted Answer · 2016-04-01 21:09:01Z

@georgeawg I expect getOfferStatus to return a string

The function only returns a string when offer.isDraft is truthy otherwise it returns null.

this.getOfferStatus = function (offer) {

    if(offer.isDraft){
        //Returns a string here
        return 'Draft';
    }else{
        this.isProcessed(offer).then(function anon1(isProcessed) {
            if (isProcessed) {
                this.isAccepted(offer).then(function anon2(isAccepted) {
                    if (isAccepted) {
                        if (isExpired(offer)) {
                            //This returns to function anon2
                            return 'Expired';
                        } else {
                            if (this.isActive(offer).then(function anon3(isActive) {
                                    //This returns to anon3
                                    return 'Active';
                                }));
                        }
                    }else{
                        //This returns to anon2
                        return 'Rejected';
                    }
                })
            } else {
                //This returns to anon1
                return 'Pending';
            }
        }, function (err) {
            console.error(err);
        });
    }
//
//Returns null here
//
}

There is only one return statement that returns to getOfferStatus. All the other return statements are inside anonymous functions inside .then methods.

It is erroneous to think those return statements will return a string to a parent (or grandparent) function. Returns need to be done for every level of nesting.

Collectives™ on Stack Overflow

AngularJS Error: $rootScope:infdig Infinite $digest Loop: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: []

isProcessed() function:

In my controller:

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

isProcessed() function:

In my controller:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related