Angular filter works but causes “10 $digest iterations reached”

Question

I receive data from my back end server structured like this:

{
  name : \"Mc Feast\",
  owner :  \"Mc Donalds\"
}, 
{
  name : \"Royale with cheese\",
  owne         


        

Answer 1

I am not sure why this error is coming but, logically the filter function gets called for each element for the array.

In your case the filter function that you have created returns a function which should only be called when the array is updated, not for each element of the array. The result returned by the function can then be bounded to html.

I have forked the plunker and have created my own implementation of it here http://plnkr.co/edit/KTlTfFyVUhWVCtX6igsn

It does not use any filter. The basic idea is to call the groupBy at the start and whenever an element is added

$scope.ownerHamburgers=_.groupBy(hamburgers, function(item) {
      return item.owner;
    });



$scope.addBurger = function() {
    hamburgers.push({
      name : "Mc Fish",
      owner :"Mc Donalds"
    });
    $scope.ownerHamburgers=_.groupBy(hamburgers, function(item) {
      return item.owner;
    });
  }