Tips for utilizing ng-repeat with a function that generates a fresh object?

Question

Tips for utilizing ng-repeat with a function that generates a fresh object?

My HTML code includes the following element:

<button ng-click="console.log(key)" ng-repeat="(key, value) in getLocalStorageKeys() track by $index">

In my JavaScript file, I have the following function:

$scope.getLocalStorageKeys = function(){
    return localStorageService.get('accountKeys');
};

You can view the Local Storage value here:

Despite my efforts, I continue to encounter the following error message:

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached.
Aborting!
Watchers fired in the last 5 iterations: [["fn: $watchCollectionWatch; newVal: 121; oldVal: 118"],["fn: $watchCollectionWatch; newVal: 124; oldVal: 121"],["fn: $watchCollectionWatch; newVal: 127; oldVal: 124"],["fn: $watchCollectionWatch; newVal: 130; oldVal: 127"],["fn: $watchCollectionWatch; newVal: 133; oldVal: 130"]]

I understand that ng-repeat attempts to match exact objects and that getLocalStorageKeys creates a new object each time it is called. However, I am puzzled as to why adding "track by $index" does not resolve this issue, as my understanding was that "track by" was designed to address this specific problem. What could be causing this error?

javascript angularjs

Answer 1

Answer №1

To begin, you can start by converting your object into an array; for example:

var arr = [];
var obj = localStorageService.get('accountKeys');
for (var i in obj) {
  var item = obj[i];
  item.id = i;
  arr.push(item);
}

Next, you can use ng-repeat to iterate over this array, while ensuring that each element is tracked using a unique identifier (such as the id key, which holds the email addresses)

<button ng-click="console.log(key)" ng-repeat="item in getLsKeys() track by item.id">

Remember: it's more efficient to perform the object to array conversion outside of the getLsKeys function if possible. This way, it doesn't need to be done repeatedly during every digest cycle.

Answer 2

To begin, you can start by converting your object into an array; for example:

var arr = [];
var obj = localStorageService.get('accountKeys');
for (var i in obj) {
  var item = obj[i];
  item.id = i;
  arr.push(item);
}

Next, you can use ng-repeat to iterate over this array, while ensuring that each element is tracked using a unique identifier (such as the id key, which holds the email addresses)

<button ng-click="console.log(key)" ng-repeat="item in getLsKeys() track by item.id">

Remember: it's more efficient to perform the object to array conversion outside of the getLsKeys function if possible. This way, it doesn't need to be done repeatedly during every digest cycle.

Tips for utilizing ng-repeat with a function that generates a fresh object?

Answer №1

Similar questions

The source 'http://localhost:3000' is not authorized to access the Twitter API

Harness the power of our custom directive when integrating with x-editable functionality

What are the steps to create an endless scrolling feature?

Having trouble with the react event handler for the renderedValue component in Material UI?

JavaScript-powered dynamic dropdown form

What are the best ways to conceptualize the benefits of WebRTC?

Ways to refresh a page after clicking a button inside the modal box

JavaScript Functions for Beginners

Trouble with AngularJS rendering the controller

I have a `null` input value. Is there a way to compute this value in relation to a date

Using the angularjs-google-maps library to implement ng-click functionality within a marker

Tips on fetching the ID of the selected option using JavaScript without relying on jQuery

"Sequencing time with Postgres, manipulating views with Angular

Preventing Page Refresh when Button is Clicked in Angular

Search for elements with a specific substring in their class names using the querySelectorAll() method

What is the best method for managing file storage and retrieval in web applications that only run on the client-side?

The AngularJS $HTTP loop counter fails to update

I am unable to generate a vite application within WSL

Tips for assigning a default value when an error occurs

Converting JSON data into a JavaScript array and retrieving the array through an AJAX request from PHP