$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

Clicking on a button will allow me to select only a portion of text within a specific cell of

Inside a table, there is a paragraph of text enclosed in a <td></td> element. Take for example the following passage. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard ...

Tips for concealing validation errors in React Js when modifying the input field

I have recently started working with ReactJs, and I've implemented form validation using react-hook-form. After submitting the form, the errors are displayed correctly. However, the issue arises when I try to update the input fields as the error messa ...

Effective Ways to Transfer Input Parameters to Karate File using npm

I am working on a test script that runs a series of queries. In order to execute the file, I need specific inputs such as URL and authorization header, which will vary depending on the environment. How can I prompt the user for these inputs in the command ...

Preserve the array's status following a personalized filter in AngularJS

I am currently working with two arrays of data displayed in a tree structure and have established a relationship between them. $scope.types=['odd','prime','square','even']; $scope.items=['1','4', ...

Securely store files by encrypting them with Node.js before saving to the disk

At the moment, I am making use of the multer library to store files on the File system. This particular application is built using Node and Express. I currently have a process in place where I save the file on the server first and then encrypt it. After e ...

The presence of fs.existsSync as a function is not recognized when importing electron

I am currently developing a Vue and Electron application and I encountered a problem while trying to restart the application. Here is my code snippet: import { app } from 'electron'; export default { name: 'Home', methods: { re ...

What is the best way to conceal content within a URL while still transmitting it to the server using node.js and express?

I have been trying to figure out how to hide certain content from the URL, but still need to send that information to the server in my Express app. So far, I haven't found any solutions that work. For example, if I have a URL like www.abc.com/viewblo ...

React Ant Design: Toggle Visibility of Columns

Seeking a method to toggle the visibility of columns for the Table Component in Ant Design. The goal is to include a checkbox next to each column name. When unchecked, the column should be hidden. In my previous experience with react-table, accomplishing ...

Creating a switch statement that evaluates the id of $(this) element as a case

I have a menu bar with blocks inside a div. I am looking to create a jQuery script that changes the class of surrounding blocks in the menu when hovering over a specific one. My idea is to use a switch statement that checks the ID of $(this) and then modif ...

Executing the callback function passed as a prop

I'm a bit confused about how to call a callback function in an element's prop. Let's say I have a button here: <Button onPress={() => { loadMore()}} title="Load More" backgroundColor='#0A55C4' /> I am wondering wh ...

Tips for integrating the connect-orientdb module with the Express framework

My objective is to establish a connection between my server code, written in nodejs using the expressjs framework, and my database which is built on orientdb. Initially, I aimed to store sessions in the database but encountered difficulties when trying to ...

Troubleshooting a 404 error for an existing object: What to do?

I encounter a 404 'Not Found' error when attempting to edit a mark through my form. I am puzzled by the source of this error because in order to access this form, I require the brand ID (which can be found in the URL). Upon accessing my modifica ...

Steps to enable the submit button in angular

Here's the code snippet: SampleComponent.html <nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)"> <label nz-radio nzValue="passed">Passed</label> <label nz-rad ...

Exploring methods to access specific values from an array containing multiple values using Lodash in Angular 4

Hey, I have an array that looks like this: [ 0: "Migration, MD" 1: "Lution, MD" 2: "Mover, MD" 3: "Dee" 4: "Prov10A" ] I would like to extract the values that contain the word "MD" in them. In other words, I want a result like this: [ 0: "Migratio ...

Issues with Angular authentication: HTTP POST request not being sent

UPDATE: I had a small oversight with my submit button placement, but it's all sorted out now (turns out the request wasn't sent because my function wasn't called, a classic mistake). Furthermore, the reason why authentication always succ ...

I keep encountering an attach() error every time I try to close a modal that contains a vee-validated form

Every time I try to close a bootstrap modal (using bootstrap-vue) that includes a vee-validated "update" form with vue.js, I encounter the following error: main.js:477686 Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#35". ...

Unable to manipulate JQuery lightSlider slides using element index

I've been working on a new page design at this link: The code is still a work in progress, so bear with me as I test out some functions and scripts. At the end of the first section, there are 4 logos that, when clicked, will trigger a modal to pop u ...

Ways to extract the id after clicking

In my code, I have a query called snapshot.forEach that functions similarly to a for loop in looping through all of my Firebase data and displaying it with a div tag containing a click event. When another user clicks on this div tag, the event will retriev ...

What is the most compatible JavaScript framework for openlayers?

I'm seeking guidance on selecting a front-end framework (e.g. React, Vue, Angular) that is compatible with OpenLayers for my upcoming implementation. Could you please recommend the most suitable front-end framework to work seamlessly with OpenLayers? ...

Exploring the use of AngularJS to retrieve information from a web service

I'm attempting to retrieve information from a web service and connect it to a scope variable in angularjs. The controller API is structured like this: public class ContactsController : ApiController { // GET: api/Contacts public List<Con ...