$filter is functioning correctly, however it is generating an error message stating: "Error: 10 $digest() iterations reached. Aborting!"

Here is an example of a JSON object that I am working with:

{
    "conversations":[
        {
            "_id": "55f1595d72b67ea90d008",
            "topic_id": 30,
            "topic": "First Conversation",
            "admin": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcc******">[email protected]</a>",
            "__v": 0,
            "messages": [
                {
                    "body": "Hello?",
                    "timestamp": "2015-09-10T10:20:40.000Z",
                    "from": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2243****">[email protected]</a>",
                    "_id": "55f1597a72b67ea90d009"
                }
            ],
            "to": [
                "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1ccc4e1c6cc*********">[email protected]</a>"
            ]
        }
    ]
}

I am currently designing a custom filter to search for messages within the conversations. The filter's output should include the conversation, message content, sender, and timestamp.

This is how my custom filter is structured:

.filter('searchForMessage', function() {
    return function(arr, searchString) {
        if (!searchString) {
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(conversation) {
            for (var i = 0; i < conversation.messages.length; i++) {
                if (conversation.messages[i].body.toLowerCase().indexOf(searchString) !== -1) {
                    result.push({
                        conversation: conversation,
                        message: conversation.messages[i].body,
                        from: conversation.messages[i].from,
                        timestamp: conversation.messages[i].timestamp
                    });
                }
            }       
        });
        return result;
    }
});

The filter successfully retrieves the necessary data but results in an "Error: 10 $digest() iterations reached. Aborting!". Can anyone provide insights into why this error is happening?

Your assistance is greatly appreciated.

Answer №1

Each time you add elements to your filter, it generates new values which Angular interprets as different from the original (=== comparison), triggering a new digest cycle.

To resolve this issue, ensure that your filter consistently returns an array with the same set of elements every time.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The innerHTML function in jQuery seems to be malfunctioning

My div isn't displaying the expected content. This is my controller action: /// <summary> /// GetCountiresForManufacturer /// </summary> /// <returns></returns> [Authorize(Roles = "Administrator")] [Ac ...

Is it feasible to utilize the Next.js (App Router) Context API to access this context in every fetch request?

To perform database queries, I require some context information. The context functions are not accessible on the client side, so I have been passing this context as args whenever I call a server component. However, I am exploring more efficient ways to h ...

Setting state back to default following the conditional rendering of a React component

Whenever the save button is clicked, I aim to display a snackbar component by updating the showSnackbar state to true. To achieve this in React, it's just a simple conditional check in the main render method. The snackbar I'm using here automatic ...

A cautionary alert is triggered by vsCode when analyzing seemingly correct code sourced from vue.js documentation

While using Visual Studio Code version 1.13.1V and referring to the vue.js guide on lazy loading, I encountered an issue when writing the following code snippet: import Vue from 'vue' import Router from 'vue-router' const Health = () = ...

Loading information into a Mongoose array schema

Currently, I am encountering a conceptual challenge along with a real error. My current project involves developing an inventory module concept that comprises of two models: Inventory Item The Inventory model solely consists of an "items" field, which s ...

Guide on deleting an element from an object array based on the content of a specific field (resulting in undefined mapping)

I am working on integrating a task list feature using React. I have created a state to store the id and content of each task: this.state = {tasks: [{id: 123, content: 'Walk with dog'}, {id: 2, content: 'Do groceries'}]} Adding elements ...

AngularJS Directives Directory: A hub for all things related to

Can you recommend any websites or resources where I can find angularjs directives that have been created by the community? Just to clarify, I'm not looking for the ones that come built-in with angularjs. ...

What is the most common method for creating a dropdown menu for a website's navigation?

Is there a common approach to creating an interactive drop-down navigation menu in the industry? I have searched on Google and found multiple methods, but as a student working on my first big web project, I am hoping to find a standard practice. I don&apo ...

Is there a way to locate a parent class starting from a child class, and subsequently track down another child class from the parent?

I am facing a challenge with multiple tags structured like this: <div class="A"> <div class="B1">...</div> <div class="C1">Hello World!</div> <div class="C2">World Hell ...

utilize JavaScript on every element that has a specific identifier

<a id="link" href="http://www.google.co.uk">link</a> <a id="link" href="http://stackoverflow.com">link</a> Is there a way to make the JavaScript code apply to all <a> tags with the id="link", instead of just the first one? A ...

Executing a series of API calls using Rxjs in Angular that result in a null response

I encountered a situation where I needed to make sequential API calls using RxJs in Angular. However, despite successfully implementing the calls, I am struggling with a null error. In this scenario, the second API call depends on receiving an id from the ...

The regex pattern did not match the line of code in the Node.js script

I need help finding a regex pattern that can identify any line of code containing just one reference to a core module. Here is an example: const coreModuleMatches = /'^[var|const]{0,1}[a-z\$\_]{1,}=require([\'|"][assert|fs|path][ ...

What could be the reason for my component not getting the asynchronous data?

Currently, I am delving into the intricacies of React and have been following a tutorial that covers creating components, passing props, setting state, and querying an API using useEffect(). Feeling confident in my understanding up to this point, I decided ...

Using the scrollIntoView() method in VUE.js to center an li element within a component

One of the components I'm working with has multiple list items, and I want to achieve a functionality where clicking on any item will center it inside the component, making it visible in the center of the view. <card-maintenance v-for="m ...

updating the row of an html table with elements from a javascript object

I am faced with the task of dynamically adding rows to a table based on the number of elements in my JavaScript object. The object consists of keys and arrays of values. userobject={ ID: [1,2,3] IP_Address: ["12.21.12 ...

Incorporate a JavaScript library into a personalized JavaScript file that is utilized within my Angular2 project

Integrating Machine Learning into my Angular2 project using the "synaptic.js" JavaScript library is my goal. After executing the command npm install synaptic --save I intend to execute a custom javascript file (myJsFile.js): function myFunction() { v ...

Please optimize this method to decrease its Cognitive Complexity from 21 to the maximum allowed limit of 15. What are some strategies for refactoring and simplifying the

How can I simplify this code to reduce its complexity? Sonarqube is flagging the error---> Refactor this method to reduce its Cognitive Complexity from 21 to the allowed 15. this.deviceDetails = this.data && {...this.data.deviceInfo} || {}; if (th ...

Creating a dynamic path to an imported file in React: A step-by-step guide

Struggling with a dilemma regarding dynamically generated paths for importing files in React. I have utilized the map() function to generate a dynamic part of the code, consisting of a repetitive sequence of div elements, each housing an audio element. The ...

Click-triggered CSS animations

Trying to achieve an effect with regular JS (not jQuery) by making images shake after they are clicked, but running into issues. HTML: <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"... JS: function wrongAnswer(){ docume ...

Struggling to integrate buttons into an h2 element with the use of createElement() and appendChild() in HTML/CSS/JS

As I work on developing a website, one of the features I've been implementing is the ability for users to add books to a list and then review or delete them. The process was smooth sailing until I reached the point of adding buttons for these actions. ...