Warning: Angular.js encountered a max of 10 $digest() iterations while iterating through array slices. Operation aborted

JSbin: http://jsbin.com/oxugef/1/edit

I am attempting to slice an array into smaller subarrays and iterate through them in order to create a table of divs that are evenly divided. Unfortunately, there seems to be an issue where I am unknowingly overwriting some models during the loop, leading to unexpected inconsistencies. Despite my efforts, I have been unable to pinpoint exactly which model is being overwritten.

Here is an example of what I am aiming for:

data = {"key1": [1,2,3,4,...] //val1 
        , ...}
divs:
    div.key1
       div1,div2,div3,div4,div5
       div6,div7,...

    div.key2
       div21,div22,div23,div24,div25
       div26,div27,...
    ...

The layout of the divs appears as intended, but the console keeps getting flooded with "...Aborting" error logs.

Where could I be going wrong that is causing this error to occur?

javascriptangularjs

Answer №1

Check out this discussion on stackoverflow here. It is important to ensure that your filter returns the exact same objects to prevent errors in $digest loop if any object changes during the repeater.

.filter("group", function () {
    return _.memoize(function (items, count) {
        var out = [],
            temp = [];
        for (var i = 0; i < items.length; i++) {
            temp.push(items[i]);
            if (temp.length == count) {
                out.push(temp);
                temp = [];
            }
        }
        if (temp.length) out.push(temp);
        return out;
    });
});

Test it out on jsbin

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

Extracting Values from a jQuery Array Object

Good day everyone! Here is the code I am currently working with: var items = []; $(xml).find("Placemark").each(function () { var tmp_latLng = $(this).find("coordinates").text(); tmp_latLng = tmp_latLng.split(","); items.push({ name: ...

javascriptjqueryarraysxmlparsing

What distinguishes {key:" "} from {key:" "}, when it comes to JSON files?

I have been working on implementing validation using express Router. The issue I encountered is that when I pass {title:""}, the express-validator does not throw an error. However, when I pass {title:" "}, it works properly. exports.postValidatorCheck = [ ...

javascriptjsonexpressmiddlewareexpress-validator

Mobile Devices Experiencing Issues with Proper Resizing of Three.JS Panorama

I'm currently working on a project using Three.Js and its device orientation library to create a panorama that users can navigate by moving their phones. Initially, everything looks great as intended: Proper Panorama However, upon refreshing the pag ...

javascriptmobilethree.jsresizewindow-resize

Automatically select a value in MUI AutoComplete and retrieve the corresponding object

I recently set up a list using the MUI (v4) Select component. I've received a feature request to make this list searchable due to its extensive length. Unfortunately, it appears that the only option within MUI library for this functionality is the Au ...

javascriptreactjstypescriptmaterial-ui

Php file not receiving data from ajax post method

forget.php PHP: if (! (empty($_POST['emailforget'])) ) { echo "here in the function"; } else { echo "here"; } AJAX: $("#passreset").on('click', function(e) { var emailforget = $("#tempemail").val(); alert(emailforget); ...

javascriptjqueryajax

What is the method for renaming Props in Vue components?

I recently embarked on my VueJS journey and attempted to implement v-model in a component, following an example I found. <template> <div class="date-picker"> Month: <input type="number" ref="monthPicker" :value="value.month" @in ...

javascriptvue.jsvuejs2

When attempting to execute Protractor tests, an error occurs stating that the object #<Object> does not possess the 'getInstance' method

Whenever I try to run my Protractor tests from the command line, all of them fail because the protractor object does not have the necessary methods. The error message I receive is: TypeError: Object # has no method 'getInstance' Although this ...

javascriptangularjstestingprotractorend-to-end

Using a string as the key in a setState call in React: A beginner's guide

One challenge I'm facing involves calling a state value in React through a string. For example, if the string is "greeting" and the state value is greeting: "hello world", I encounter difficulties. When trying to call this.state.greeting using the st ...

javascriptreactjs

What is the best way to retrieve the initial <ul> element from a JavaScript document?

Just to clarify, I'm looking to target a specific div with a class and the first <ul> from a document (specifically in blogger). Currently, I have a JavaScript function that grabs the first image and generates a thumbnail as shown below: //< ...

javascripthtml

Printing iframe does not display CSS effects

As I work on developing a program that involves the use of iframes, I have encountered an issue with CSS effects not appearing when trying to print the iframe. Despite applying CSS successfully in browsers like IE, Chrome, Mozilla, and Edge, the printed ou ...

javascriptphpcssajaxiframe

Navigating the realm of promises within Angular

I have been working on a project where I wanted to modify a NodeJs/AngularJs tutorial to use Postgres and the Sequelize ORM instead of MongoDB. The ORM transitioned to Bluebird promises, so I had to update my code accordingly. Previously, I was fetching T ...

node.jsangularjspromisebluebird

Tips for extracting form data from a directive in Angular

I am using this template setup: <div class="modal" id="popupModal" tabindex="-1" role="dialog" aria-labelledby="createBuildingLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <d ...

angularjsangularjs-directiveangularjs-scope

Leveraging ng-click and ng-hide/show directives within ng-repeat in Angular

I have a simple Single Page Website built with Angular. I utilized ng-repeat to generate content on the main page, where each item is an image. I am looking to create an alternate view for each image to display more details. I have implemented this feature ...

javascripthtmlcssangularjs

Choose the initial search result without actually opening it using jQuery

I am working on an HTML file that contains multiple input fields, which get automatically filled when a corresponding item is selected from the auto-complete feature. Here is a snippet of my HTML code: <table class="table table-bordered"> <u ...

javascriptjqueryhtmljsonajax

Interacting between various components in separate files using React.js

Creating a page using React involves two Components with different functions. The first component, ProfileFill, is responsible for capturing form data. On the other hand, the second component, ProfileFillPercent, which resides in a separate file, calculate ...

javascriptreactjs

Does D3 iterate through the entire array every time we define a new callback?

It seems that every time a callback is set, d3 loops through the entire array. Initially, I thought that functions like attr() or each() were added to a pipeline and executed all at once later on. I was trying to dynamically process my data within d3&apo ...

javascriptd3.js

Exploring Illumination with Three.js

I'm interested in exploring the light properties further. I am curious about the variables used in the DirectionalLight.js and SpotLight.js source codes. Could you explain the difference between castShadow and onlyShadow? Is there a way to manage th ...

javascript3dthree.jslight

How to replace text using jQuery without removing HTML tags

One of the functions in my code allows me to replace text based on an ID. Fortunately, this function is already set up and working smoothly. $('#qs_policy .questionTitle').text("This text has been updated"); However, there is another ...

javascriptjquery

When utilizing an object as state in React, the `setState` function will only set

Currently, I am working on developing a React form that utilizes a custom Input component which I have created multiple times. The objective is to gather all the names and values from the form in the parent component: {inputName: value, inputName2: valu ...

javascriptreactjstypescriptreact-hooks

Maximizing efficiency when retrieving information from JSON files

Is there a way to optimize data retrieval for faster loading and determining data length without loading the entire JSON data? Check out this code snippet: const url = "https://jsonplaceholder.typicode.com/comments"; const [data, setData] = useState([] ...

javascriptreactjsjsonoptimizationaxios