How come Angular doesn't properly handle array element modifications through filters?

Question

How come Angular doesn't properly handle array element modifications through filters?

Despite my efforts to debug, I am still unable to pinpoint the mistake I am making in Angular.js.

I have been closely following the basic Angular tutorial at https://docs.angularjs.org/tutorial/step_03, where all examples run smoothly. However, I decided to experiment with some advanced features of Angular and added my own code to the step 3 examples.

Below are the links to the HTML and controller files:

index.html: https://gist.github.com/tario/f07239992eea75535421

controller.js https://gist.github.com/tario/1b6155b5c97e747abe32

The filter function is defined here: https://gist.github.com/tario/1b6155b5c97e747abe32#file-controllers-js-L16

However, when I try to enable the uppercase feature using the checkbox, I encounter the following error message:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: $watchCollectionWatch; newVal: 62; oldVal: 59"],["fn: $watchCollectionWatch; newVal: 65; oldVal: 62"],["fn: $watchCollectionWatch; newVal: 68; oldVal: 65"],["fn: $watchCollectionWatch; newVal: 71; oldVal: 68"],["fn: $watchCollectionWatch; newVal: 74; oldVal: 71"]] http://errors.angularjs.org/1.2.17/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…20%24watchCollectionWatch%3B%20newVal%3A%2074%3B%20oldVal%3A%2071%22%5D%5D at at Scope.$get.Scope.$digest () at Scope.$get.Scope.$apply () at HTMLInputElement. () at at Array.forEach (native) at forEach () at HTMLInputElement.eventHandler ()

I am uncertain if the way I implemented the filter aligns with best practices. Can you help me understand why it's failing? All I intended to do was create a new array with transformed content from the initial array.

javascript angularjs angularjs-scope

Answer 1

Answer №1

When consulting the Angular documentation regarding this error:

This particular error occurs when the stability of the application's model is compromised, leading to a cascade effect where each $digest cycle triggers a state change followed by another $digest cycle. Angular is designed to detect and prevent such scenarios to avoid an infinite loop that could render the browser unresponsive.

The issue arises during each digest cycle, as your filter consistently produces a new array. Due to AngularJS's dirty checking mechanism, any change in values prompts a new digest cycle, perpetuating the process.

To address this problem, there are two possible solutions:

1) Opt for consistent results by employing the memoize function from Lodash.

Each call to a memoized function involves a resolver function that checks the cache for previous results before computation. If retrieved, the cached result is returned; otherwise, the calculation is performed and the outcome stored for future use.

    phonecatApp.filter('uppercaseAllThings', function () {
        return _.memoize(
        function (items, enabled) {
            if (enabled) {
                var newitems = [];
                angular.forEach(items, function (item) {
                    newitems.push(uppercaseAllAttributes(item));
                });

                return newitems;
            }
            return items;
        },
        function (items, enabled) {
            return enabled + angular.toJson(items)
        });
    });

An explanatory JsFiddle detailing this approach can be accessed here.

2) Alternatively, if uppercase conversion suffices, utilize CSS to conditionally apply styling.

The proposal involves creating a CSS class that leverages the text-transform property.

.uppercase {
   text-transform:uppercase;
}

Incorporate this class into your stylesheet and adjust the HTML structure accordingly:

<li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
    ng-class="{'uppercase':uppercaseEnabled}">
   <span>{{phone.name}}</span>
   <p>{{phone.snippet}}</p>
</li>

A simple JSFiddle elucidating the second solution has been provided.

Answer 2

When consulting the Angular documentation regarding this error:

This particular error occurs when the stability of the application's model is compromised, leading to a cascade effect where each $digest cycle triggers a state change followed by another $digest cycle. Angular is designed to detect and prevent such scenarios to avoid an infinite loop that could render the browser unresponsive.

The issue arises during each digest cycle, as your filter consistently produces a new array. Due to AngularJS's dirty checking mechanism, any change in values prompts a new digest cycle, perpetuating the process.

To address this problem, there are two possible solutions:

1) Opt for consistent results by employing the memoize function from Lodash.

Each call to a memoized function involves a resolver function that checks the cache for previous results before computation. If retrieved, the cached result is returned; otherwise, the calculation is performed and the outcome stored for future use.

    phonecatApp.filter('uppercaseAllThings', function () {
        return _.memoize(
        function (items, enabled) {
            if (enabled) {
                var newitems = [];
                angular.forEach(items, function (item) {
                    newitems.push(uppercaseAllAttributes(item));
                });

                return newitems;
            }
            return items;
        },
        function (items, enabled) {
            return enabled + angular.toJson(items)
        });
    });

An explanatory JsFiddle detailing this approach can be accessed here.

2) Alternatively, if uppercase conversion suffices, utilize CSS to conditionally apply styling.

The proposal involves creating a CSS class that leverages the text-transform property.

.uppercase {
   text-transform:uppercase;
}

Incorporate this class into your stylesheet and adjust the HTML structure accordingly:

<li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
    ng-class="{'uppercase':uppercaseEnabled}">
   <span>{{phone.name}}</span>
   <p>{{phone.snippet}}</p>
</li>

A simple JSFiddle elucidating the second solution has been provided.

How come Angular doesn't properly handle array element modifications through filters?

Answer №1

Similar questions

Tips for disregarding modified configuration files in Git

Restrict the duplication of div elements with JQuery

Is it possible to access XMLHTTPRequest.responseText using a standardized method in JSON.parse?

How can I use AngularJS to show a JSON value in an HTML input without any modifications?

Confusing JQuery query about updating image links

What is a reliable method to retrieve the text from the current LI if all LI elements in the list share the

Why is the image auto-swapping script failing to display images frequently?

Show a dynamic highchart graph displaying linear data retrieved from the database

Guarantee the correct sequence of following HTTP ajax requests within AngularJS

Tips for applying styles with an on-click event in a loop

The variable 'originalPrompt' has already been declared within the React TypeScript code

leveraging UI-Router for navigating based on app state and data

XMLHttpRequest changes the contents of UTF-8 encoded text

Click to slide the div down and up when needed

Consistently gathering stock price data tables

Capturing screenshots with Selenium in Node.js is proving to be quite sluggish

Exploring the distinction and connection between the $scope provided in a controller and the $scope provided in a directive

Cut off all information beyond null characters (0x00) in Internet Explorer AJAX responses

Only the initial element within the specified class is targeted by JQuery

EJS failing to render HTML within script tags