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

Having trouble sending a POST request to an Endpoint with Formidable and Request

I am encountering an issue while attempting a basic file upload to a REST endpoint using Node. The error that keeps appearing is: TypeError: Cannot read property 'hasOwnProperty' of null Below is my form setup: <form action="/upload4" me ...

A guide on attaching files to CouchDB using the Couchdb4j library

I'm facing a challenge with using a Java application to attach system files to a Couchdb database using the Couchdb4J library. Despite trying to modify the code provided, I keep encountering an unresolved error. Can anyone point out where I went wrong ...

What causes my useEffect hook to trigger twice in React?

I'm currently utilizing @preact/signals-react in my react project for integration purposes. Encountered a challenge that requires resolution. Interestingly, I discovered that by removing import { signal } from '@preact/signals-react', the ...

Concealing a div depending on the price variation

I'm looking for a way to dynamically show or hide a div based on the price of selected variations in my online store. Let's take a product with options priced at £359 and £455 as an example. In addition, there is a finance plugin with a minim ...

Removing an Element in a List Using Jquery

In my JQuery, there is a list named additionalInfo which gets populated using the function below: $('#append').on('click', function () { //validate the area first before proceeding to add information var text = $('#new-email&a ...

Encoding a string in JSON that contains the "#" symbol along with other special characters

The client side javascript code I have is as follows: <html> <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(document).ready(function() { //var parameters = "a=" + JSON.stringify( ...

Why is the time input field in AngularJS programmed to expect a date instead?

When booking, I stored the time using $filter('date')($scope.booktime, 'mediumTime'). After booking, I have an editbooking function where I pass the time and encounter an error in the console: Error: [ngModel:datefmt] Expected 11:59:00 ...

Why does Array Object sorting fail to handle large amounts of data in Javascript?

Encountered an issue today, not sure if it's a coding problem or a bug in Javascript. Attempting to sort an object array structured like this: const array = [{ text: 'one', count: 5 }, { text: 'two', count: 5 }, { text: 'thre ...

What steps are necessary to modify my AngularJS routes to a file?param1=a&param2=b structure?

I am facing a challenge with converting the URL format of an existing AngularJS application. Currently, the URLs are structured like this: example.com/thePage/#/section/1/subsection/1 My goal is to make the section and subsection parameters more readable ...

Having trouble with the dropdown multiselect feature in AngularJS?

I'm striving to develop a straightforward multi-select dropdown utilizing angular JS, bootstrap, and JS. This dropdown should display days (mon, tue...sun), with options for select all and unselect all. My goal is to create a controller that will de- ...

Handling dynamic routes with React Router 4 and the 404 path

I have been working with the latest version of React Router (4) and have implemented a dynamic route configuration as described in the tutorial. The routes are functioning correctly, except for when I tried to add a 404 path following the tutorial's i ...

Is there a way to incorporate timeouts when waiting for a response in Axios using Typescript?

Can someone assist me in adjusting my approach to waiting for an axios response? I'm currently sending a request to a WebService and need to wait for the response before capturing the return and calling another method. I attempted to utilize async/aw ...

The word 'function' is not defined in this React Component

Recently delving into the world of React, I decided to create a simple timer application. However, I encountered an error message upon running the code: (Line 40: 'timeDisplay' is not defined no-undef) class Home extends React.Component { ...

AngularJS encountered an unhandled syntax error

My current approach involves utilizing the code below to display data fetched from Parse API into a table using AngularJS and Bootstrap. However, the JavaScript section where I have defined the controller doesn't seem to be running as expected. Below ...

Transform a javascript object with class attributes into a simple object while keeping the methods

I am seeking a way to convert an instance of a class into a plain object, while retaining both methods and inherited properties. Here is an example scenario: class Human { height: number; weight: number; constructor() { this.height = 1 ...

Tips for optimizing Angular source code to render HTML for better SEO performance

Our web platform utilizes Angular JS for the front-end and node js for the backend, creating dynamic pages. When inspecting the code by viewing the source, it appears like this: For our business to succeed, our website needs to be SEO-friendly in order to ...

Any ideas on how to fix the error that pops up during the installation of the bootstrap package in Node

The npm command is not recognized as a valid cmdlet, function, script file, or operable program. Please double check the spelling of the command and ensure that the path is correct before trying again. This error occurred at line 1. npm i bootstrap + ...

Can Angular be used to create a hybrid application?

I recently created an AngularJS application with the intention of it functioning as a hybrid mobile app, capable of running locally from the file system. However, upon attempting to access an HTML file using $routeProvider, I encountered a CORS violation ...

Implementing a 1-second delay in a Vue.js delete request

I have items that are retrieved through API calls and users can add them to their cart. They also have the option to delete items from the cart, but I want the item to be visually removed from the front-end after 1 second because of an animation on the del ...

Setting the backEnd URL in a frontEnd React application: Best practices for integration

Hey there - I'm new to react and front-end development in general. I recently created a RESTful API using Java, and now I'm wondering what the best way is to specify the backend URL for the fetch() function within a .jsx file in react. Currently, ...