The ng-repeat track by function is not functioning as expected, displaying slow performance and continuing to create $$hashKey

In my code, I have an ng-repeat setup like this:

ng-repeat="article in main[main.mode].primary | orderBy: main[main.mode].primary.filter.order
track by article.url"

The main[main.mode].primary array contains the data and the .filter.order string is used for ordering.

I came across a helpful blog post that explained how ngRepeat adds a $$hashKey property to each item behind the scenes to keep track of it. This causes issues when trying to refresh or regenerate the list with new items because they don't have the same $$hashKey property as the original items.

My application experiences a delay of over a second when regenerating the list, which led me to investigate using the track by feature. Despite following the correct syntax for ordering and tracking an array according to various resources I consulted, the track by functionality doesn't seem to be working as expected. The AngularJS docs mention the following pattern for using track by with filtering:

item in items | filter:searchText track by item.id is a pattern that might be used to apply a filter to items in conjunction with a tracking expression.

I'm puzzled as to why the track by feature isn't working as intended, especially since I am using Angular version 1.3.11.

Edit: Even removing the orderBy argument didn't solve the issue:

ng-repeat="article in main[main.mode].primary track by article.url"
javascriptangularjsangularjs-ng-repeatangularjs-track-by

Answer №1

In the Angular Documentation, it states that the orderBy function only works on arrays. This means if you are trying to iterate over an object, you won't be able to use it unless you first convert your object into an array.

For more information, visit: https://docs.angularjs.org/api/ng/filter/orderBy

If you encounter this issue, there are alternative solutions such as creating your own filter or transforming your object into an array of objects with key-value properties. Here is an example:

var newArr = [];
angular.forEach(object, function(key, value) {
  newArr.push({key: key, value: value});
})

Now, newArr is an array that can be sorted by either key or value using the orderBy function.

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 node.js API request is experiencing a unresponsive state

As a newcomer to the world of JavaScript, I am currently learning the basics of Node.js. One task I'm working on involves retrieving a contact from my mongoDB and creating a GET method to return it. Sounds simple, right? Below is the router method I ...

javascriptnode.jsexpressmongoosepromise

Vue warning: Issue encountered in created hook - Attempting to access property 'get' of an undefined variable is causing a TypeError

I encountered an error while using axios: [Vue warn]: Error in created hook: "TypeError: Cannot read property 'get' of undefined" export default { methods: { loadUsers(){ axios.get("api/user").then(data => ...

javascriptphplaravelvue.jsaxios

Learn the ins and outs of utilizing *ngIf in index.html within Angular 8

Can anyone explain how I can implement the *ngIf condition in index.html for Angular2+? I need to dynamically load tags based on a condition using the *ngIf directive, and I'm trying to retrieve the value from local storage. Below is my code snippet b ...

javascripthtmlangularangular8

User-triggered event not being emitted back from SocketIO server

In my React frontend, I am using socket.io-client and in the Express backend application, I am utilizing socket.io. There is an event on the server that sends a message to all users in a room when triggered. socket.on('connection', () => { ...

javascriptnode.jsreactjsexpresssocket.io

Convert the XML response from an API into JSON

Is there a way to convert my XML response into JSON using Angular? This is the response I am working with: <?xml version="1.0" encoding="utf-8"?> <string xmlns="http://tempuri.org/"><?xml version="1.0" encoding="utf-8"?&gt; &lt;Fer ...

angularjsjsonangularparsing

Exploring the variations between getRequestHandler and render functions in Custom Next.js applicationsIn a

Greetings, I found it quite unexpected that there is a lack of information available on the functionalities of the getRequestHandler and render functions within the next package. As I am in the process of setting up a custom server, I am curious about wh ...

javascriptnode.jsnext.js

Symfony's DataTables is encountering an issue with the JSON response, showing

I have encountered an issue while trying to fetch data from a response within my template table (using DataTables). The error message I receive is as follows: DataTables warning: table id=example - Invalid JSON response. For more information about this ...

javascriptjqueryjsondatatables

Is it a cookie-cutter function?

Can someone help me solve this problem: Implement the special function without relying on JavaScript's bind method, so that: var add = function(a, b) { return a + b; } var addTo = add.magic(2); var say = function(something) { return something; } ...

javascriptnode.js

utilizing the identical characteristics of the parent component

In order for the properties in InputGroup.js to be accessible as this.props in lower-level components like TextInput.js, Checkbox.js, I have created a simple component called InputComponent.js. In this component, I assign this.props to this.prpt so that it ...

javascriptreactjs

What sets local Node package installation apart from global installation?

My curiosity sparked when I began the process of installing nodemon through npm. Initially, I followed the recommended command and noticed the instant results displayed on the right side of my screen: npm i nodemon This differed from the installation ins ...

javascriptnode.jsnpmnodemon

Theme not being rendered properly following the generation of a dynamic component in Angular

I am currently working on an Angular 9 application and I have successfully implemented a print functionality by creating components dynamically. However, I have encountered an issue where the CSS properties defined in the print-report.component.scss file a ...

javascriptangulartypescript

Adjust the hue of the X axis labels to display a variety of colors within Chart.js

Utilizing Chart.js for my bar chart. The X axis labels contain 4 lines, and I want to change the color of each line individually rather than having all values in one color. var barChartData = { labels: [["Injection", 10, 20], // Change the color here ...

javascriptjquerychart.js

Develop a fresh scope attribute within a directive in AngularJS

The value remains hidden in the DOM, and I am experimenting to see if this approach will work successfully. My goal is to establish a new scoped value within the directive and display it on the DOM. app.directive("rest", ["restFactory", function($rest){ ...

angularjsangularjs-directive

Utilizing SVG within Sproutcore allows for seamless access to DOM nodes and the ability to effortlessly bind Sproutcore events directly to the DOM

Exploring Sproutcore, I am delving into the world of SVG (Standard Vector Graphics) integration within the app. The goal is to utilize a canvas for drawing elements like lines, boxes, and images, all of which SVG offers. My approach involved incorporating ...

javascriptjquerysvgsproutcoresproutcore-views

What is the best way to retrieve the specific property from a bound function?

I'm looking to retrieve the value of a specific property from a function that has already been bound. function foo(){ console.log(this.a) } const bar = foo.bind({a:1}) bar() // Outputs 1 bar.getThis() // expected result is { a: 1 } Given the code ...

javascriptthis

Create a new array by applying a filtering function to the provided data in JavaScript using React

I am a beginner in the world of React. I have an object containing an array (Map) as follows: "POSSIBLE_UPDATE_OPTIONS": { "Process": ["confirm"], "Confirmed": [ "Process", ...

javascriptarraysreactjs

Could you provide suggestions on how to update the content of an HTML tag within a Vue component?

I am new to Vue.js and struggling to grasp its concepts. I am interested in finding a way for my custom Vue component (UnorderedList) to manipulate the content within it. For example, if I have <p> tags inside my component like this : <UnorderedL ...

javascriptvue.jsvue-component

Tips for handling binary data retrieved from a SQL query (such as LONGBLOB type) in node.js

I am trying to send binary data to the client using node.js, but I have encountered a limitation where write can only send string or Buffer. How can I successfully send binary data to the client? dbconnect.selectBinary(conn,function(result) { //resul ...

javascriptmysqlsqlnode.js

Tips for inserting user input into an array and showcasing it

const [inputValue, setInputValue] = useState(""); return ( <input onChange={(event) => setInputValue(event.target.value)} /> <p>{inputValue}</p> ); I'm facing a problem where I need to take input from a user and store it in ...

javascriptreactjsreact-hooks

Using anti-cache code in jQuery's getJson function

During an interview, I was presented with the following question: Can you provide a one-liner code showing the proper syntax to add an anti-cache code to all jQuery getJson calls in a project without individually adding it to each call? I must admit th ...

javascriptjqueryjson