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

Color picker can be utilized as an HTML input element by following these steps

Understanding the extent of variables in Javascript

The generation of the npm bin script is not working as expected on Windows operating systems

Can you please explain how to indicate a modification in a JSON object with Polymer, transferring information from Javascript, and subsequently displaying child elements?

Avoiding repetition in json array using reactjs with the help of axios

Issue encountered in performing a post request using AngularJS

Why is my PanResponder failing to detect changes in the updated state?

Get every possible combination of a specified length without any repeated elements

Exploring the contrast between window and document within jQuery

What advantages and disadvantages come with using timeouts versus using countdowns in conjunction with an asynchronous content loading call in JavaScript/jQuery?

Steps to begin again an Ionic application on IOS operating system

Execute function upon initial user interaction (click for desktop users / tap for mobile users) with the Document Object Model (DOM)

Trouble with X-editable: Unable to view values when editing and setting values using J

What is the method to retrieve the total number of days in a moment-jalaali using NodeJS?

How to make Angular 5 wait for promises to finish executing in a for loop

Creating an If statement to evaluate the state of a parameter

When the button is clicked, my goal is to increase the value of the text field by one using JavaScript

What is the process for configuring SSL in node.js and express.js?

In what situations is it beneficial to utilize inherited scope, and when is it best to avoid it

How can one use C# and Selenium to send text to a hidden textarea with the attribute style="display: none;"?