Function in ng-repeat with track by causes Infinite $digest-loop

Question

Apparently I did not yet understand the mechanic behind ng-repeat, $$hashKeys and track by.

I am currently using AngularJS 1.6 in my project.

The Problem:

I got an array of complex objects which i want to use to render a list in my view. But to get the required result i need to modify (or map/enhance/change) these objects first:

const sourceArray = [{id: 1, name: 'Dave'}, {id:2, name: Steve}]

const persons = sourceArray.map((e) => ({enhancedName: e.name + e.id})) 

//Thus the content of persons is:
//[{enhancedName: 'Dave_1'}, {enhancedName: 'Steve_2'}]

Binding this to the view should be working like this:


    {{person.enhancedName}}

However this obviously runs into a $digest()-loop, because .map returns new object-instances every time it is called. Since I bind this to ng-repeat via a function, it gets reevaluated in every $digest, the model does not stabilize and Angular keeps rerunning $digest-cycles because these objects are flagged as $dirty.

Why i am confused

Now this is not a new issue and there are several solutions for this:

In an Angular-Issue from 2012 Igor Minar himself suggested to set the $$hashKey-Property manually to tell angular that the generated objects are the same. This is his working fiddle, but since even this very trivial example still ran into a $digest-loop when i used it in my project, i tried upgrading the Angular-Version in the fiddle. For some reason it crashes.

Okay... since Angular 1.3 we have track by which should essentially solve this exact problem. However both

and

crash with a $digest-loop. I was under the impression that the track by statement should let angular believe it works with the same objects, but apparently this is not the case since it just keeps checking them for changes. To be honest, i have no idea how i can properly debug the cause of this.

Question:

Is it possible to use a filtered/ modified array as data-source for ng-repeat?

I do not want to store the modified array on my controller, because i need to update its data constantly and would then have to maintain and refresh it manually in the controller instead of relying on databinding.

user_5257399 · Answer

The "it crashes" fiddle that you provided, did not produce an infinite digest for me. In fact: it did not even successfully bootstrap the Angular app (looks like bootstrapping cannot be done that way in latest Angular).

I rewrote it to use an Angular bootstrap mechanism that I understood. It reproduces the crash, like you said.

I found a way to make it successfully track by stringified JSON.








  I have {{getList().length}} friends. They are:
  
    
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.

i.e. we provide a tracking function, stringify(). There's probably an Angular builtin for that, too.

track by $index worked as well — contrary to your finding. I think JsFiddle ruined the experimentation slightly*

*The following is anecdotal. I believe that I experienced some problems with JsFiddle itself. For example: my track by stringify() example didn't work until I forked the Fiddle and tried the same code again in a new browsing context. I believe that as soon as I ever got any infinite digest: that JsFiddle would always infinite digest. It seemed like there was some statefulness that was lingering from previous runs. So, I would advise that anything you saw fail in JsFiddle, you try again in a new JsFiddle.

As for why your $$hashKey trick led to an infinite digest — I think Angular does not expect $$hashKey to be a function. So probably instead of invoking your function, it did a reference comparison of the function assigned to $$hashKey.

Since you assign to $$hashKey a new instance of the comparator each time you invoke getList(): the references could never be equal on subsequent digests, and so it would keep trying the digest forever.

EDIT: updated StackOverflow embed and JsFiddle to use HTTPS CDN (to avoid falling afoul of mixed content security).

user_8682941 · Answer

As long as the watched expression getPersons() returns a new array, even with the same elements, the $digest cycle, which uses === comparison, cannot stop; regardless the track by expression, that comes into play for rendering nodes, after the change detection of ngRepeat.

(function() {
  angular
    .module('app', [])
    .controller('AppController', AppController)

  function AppController($interval) {
    // you may have more performant options here
    const hashFn = angular.toJson.bind(angular)
    // your mapping logic for presentation
    const mapFn = (e) => ({
      enhancedName: e.name + e.id
    })

    // initialization of data
    let sourceArray = [{
      id: 1,
      name: 'Dave'
    }, {
      id: 2,
      name: 'Steve'
    }]

    // initialization of "cache"
    let personList = sourceArray.map(mapFn),
        lastListHash = hashFn(sourceArray)

    Object.defineProperty(this, 'personList', {
      get: function() {
        const hash = hashFn(sourceArray)
        if (hash !== lastListHash) {
          personList = sourceArray.map(mapFn)
          lastListHash = hash
        }

        // you need to return **the same** array
        // if the source has not been updated
        // to make `$digest` cycle happy
        return personList
      }
    })

    // test of changes
    $interval(() => sourceArray.push({
      id: Date.now(),
      name: 'a'
    }), 1000)
  }
})()




  
    There are {{ctrl.personList.length}} persons.
    
      
        [{{$index + 1}}] {{ person.enhancedName }}

Function in ng-repeat with track by causes Infinite $digest-loop

2 Answers