Tips on obtaining standardized values for an array with ng-repeat

My goal is to retrieve the normalized value of an array associated with different groups without altering the original array items. Instead, I am creating new objects for each group's normalized items.

http://jsfiddle.net/k5Dvj/5/

$scope.nomalizedItems = function (groupid) {
    var groupItems = $scope.originalItems.filter(function (item) {
        return item.groupid == groupid
    });

    var values = groupItems.map(function (item) {
        return item.value;
    });
    var maxValue = Math.max.apply(null, values);
    return groupItems.map(function (item) {
        return {
            id: item.id,
            normalizedValue: item.value / maxValue
        };
    });
};

Although this logic seems straightforward, I keep encountering an error in AngularJS that says "

[$rootScope:infdig] 10 $digest() iterations reached. Aborting!
" even after adding "track by item.id" in the ng-repeat expression.

Any suggestions on how to resolve this problem? Thank you!

Answer №1

ngRepeat is not functioning properly. Your code is generating new objects each time, causing the digestion loop to run continuously...

As far as I understand, using the track by expression in Angular does not mean that it will automatically match previous entities with the new ones after recreating them without their internal $$hashKey properties. This directive is actually used to instruct ngRepeat on how to construct this internal $$hashKey in order to prevent unnecessary DOM element creation.

In order to resolve this issue, you should only modify your items instead of creating new ones:

    groupItems.forEach(function (item) {
        item.normalizedValue = item.value / maxValue;
    });
    return groupItems;

By following this approach, it should function correctly.

Additionally, your filtering process is occurring during each digestion loop. To enhance performance, you may want to pre-process this array within specific events or watcher callbacks.

UPDATE

Actually, if you move this list outside of the ngRepeat expression, the digestion won't keep looping endlessly! I recommend having a controller for each group, utilizing the child scopes created by the ngRepeat directive and pre-processing this list in a watcher callback.

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

In React, the ES6 prototype method map failed to render anything on the screen

Is there an issue with my map method implementation? var App = React.createClass({ getInitialState(){ return { items:[1,2,3] } }, renderItem(){ return( this.state.items.map((item,i))=> <li key={i}> { ...

What is the best way to transfer a content script variable to a background script in a Chrome Extension?

I am looking to transfer a variable named "website_hostname" from the content script to the background script. This variable holds the hostname of the website you are currently visiting. Content Script: var website_hostname = window.location.href; //Cod ...

Warning: Potential Infinite Loop when using Vue JS Category Filter

I developed a program that filters events based on their program and type. The program is working correctly, however, an error message stating "You may have an infinite update loop in a component render function" keeps popping up. I suspect that the issue ...

What is the most effective method for identifying the initial timestamp for each day, week, or month within a collection of timestamps?

I am dealing with a lengthy array of sorted timestamps representing stock price quotes. These timestamps have minimal resolution, meaning that each timestamp is at least 1 minute bigger than the previous one. However, there can be gaps during the day, espe ...

The font size of the textarea dynamically adjusts based on the size of the screen

Some strange behavior is occurring in the Android default browser when I set the width and height of a textarea to 100%. The font size of the textarea seems to increase based on the screen size, and even though I attempted to alert the font-size using jQue ...

Why is my Laravel function retrieving outdated session data?

Currently, I am in the process of developing a shopping cart feature using session. My goal is to create a function that can update the quantity of an item in the shopping cart and refresh both the subtotal and the list of items in the cart displayed on th ...

MUI React: The Smallest Date Possible

Is there a way to ensure that the user cannot select a To Date that is earlier than the From Date? Below are my Two Date Pickers, with date formatting done using moment. <DatePicker v ...

What are some alternatives to utilizing ng-init within a 'view'?

I am currently working on implementing a 'like' feature for my application. My goal is to dynamically set the value of a generated number as the 'like count'. However, I have encountered an issue with using 'ng-init', as it is ...

Issue with Datatables FixedColumns plugin in IE8/7 and Firefox

I am encountering issues with the FixedColumn plugin on IE8, IE7, and Firefox. All of them are causing my table to malfunction, displaying the following error: Error: Invalid argument. Line: 566 Char: 3 Code: 0 URI: ./resources/javascript/dataTable/Fixed ...

what is the best way to center list items in material ui?

I have been attempting to align the list items (checkbox, text, and buttons) within a Material UI list in the center, but all my attempts have been unsuccessful. Is there anyone who knows how to resolve this issue? Your help would be greatly appreciated! h ...

Are you encountering difficulties while managing back pressure as anticipated when applying node request or axios in combination with streams for downloading and extracting files?

We have encountered a peculiar problem while trying to download and decompress a large file of approximately 6 GB (which decompresses to around 64 GB) using the HTTP protocol. To achieve this, we are utilizing either Node.js' request library or axios. ...

Is it possible to adjust the color of this AnchorLink as I scroll down?

Currently struggling to update the color of a logo as I scroll. While the navigation bar successfully changes colors, the logo remains stagnant. Here is the excerpt from my existing code: navigation.js return ( <Nav {...this.props} scrolled={this ...

When clicking in JavaScript, there are two parts to the function, however only one part will work at any given time

I am currently working with two server-side PHP scripts: 1. /addit.php - which generates a PDF file on the server based on the provided ID 2. /viewit.php - which allows the PDF file to be downloaded to the browser window. While both of these scripts are ...

Tips for selecting checkboxes with fetched information

I have created a script that passes json data to a variable and then collects all the necessary information such as chapterid, questionid ...etc on the inner html page. jQuery Code: $('div[id^="questionsNo_"]').ready(function() { var assessme ...

NodeJS making seven successful Ajax requests

I'm delving into the world of JavaScript, NodeJS, and electron with a goal to create a presenter-app for remote control over powerpoint presentations. My setup involves an electron server structured like this: const electron = require('electron ...

Best practices for effectively managing a sizable dataset in Vue.js

My task at hand is to create a visualization dashboard that can operate solely in the browser, utilizing Vue.js, D3, and JavaScript. The dataset I am working with is stored in a .json file that is 48 MB in size. However, upon parsing the file using d3.json ...

Tips for updating VUE's main.js file to incorporate the routers/index.js configuration

What is the reason for the difference in syntax between the VUE UI main.js code generated by CLI/3 and the older version, and how does it function? What are the various components of the new syntax and how do they work? sync(store, router) // for vuex-rou ...

Execute Yarn commands from the main directory

In the midst of my project, I have various sub projects - one of which is dedicated to JavaScript. My intention is to employ this JavaScript project as a task runner for the entire endeavor using gulp. However, I've hit a snag in the process. The lay ...

Unable to stop interval in Angular 5 application

My setInterval() function seems to be working fine as the timer starts, but I am encountering an issue with clearInterval(). It does not stop the timer when the counter value reaches 100 and continues running continuously. Any help or suggestions would be ...

Limiting the number of times a specific character appears using a regular expression

Currently, I am in search of a regular expression that allows me to set a limit on the number of times a special character can appear. For instance, if I want to restrict the occurrence of * to a maximum of 5 times in the entire text, then the output shou ...