Infinite loops caused by ng-repeat and search filter results

Question

After returning search results as following:

[
  {
    "id": 0,
    "name": "UserManagement",
    "parent": "modules",
    "grandpa": "non",
    "viewname": "User Management",
    "level": "module",
    "template": "UserManagement",
    "keywords": "user management users manager managing ",
    "description": "module UserManagement My goal is simple. It is a complete understanding of the universe, why it is as it is and why it exists at all . Stephen Hawking",
    "partitions": {

    }
},
{
    "id": 1,
    "name": "UsersRoles",
    "viewname": "Users Roles",
    "level": "partition",
    "parent": "UserManagement",
    "grandpa": "modules",
    "template": "UsersRoles",
    "keywords": "users roles accounts ",
    "description": "partition UsersRoles The black hole information paradox is a puzzle resulting from the combination of quantum mechanics and general relativity",
    "usecases": {

    }
},
{
    "id": 2,
    "name": "Login",
    "viewname": "Log in",
    "level": "usecase",
    "parent": "UsersRoles",
    "grandpa": "UserManagement",
    "template": "Login",
    "keywords": "log in",
    "description": " usecase login black hole information paradox"
},
{
    "id": 3,
    "name": "EditProfile",
    "viewname": "Edit Profile",
    "level": "usecase",
    "parent": "UsersRoles",
    "grandpa": "UserManagement",
    "template": "EditProfile",
    "keywords": "edit profile",
    "description": "usecase editprofile black hole information paradox"
},
{
    "id": 7,
    "name": "Accounting",
    "parent": "modules",
    "grandpa": "non",
    "viewname": "Accounting",
    "level": "module",
    "template": "Accounting",
    "keywords": "accounts",
    "description": "module accounting My goal is simple. It is a complete understanding of the universe, why it is as it is and why it exists at all . Stephen Hawking",
    "partitions": {                        
    }
},
{
    "id": 10,
    "name": "NewFiscalRecord",
    "viewname": "New Fiscal Record",
    "level": "usecase",
    "parent": "AccountsAndFiscalRecords",
    "grandpa": "Accounting",
    "template": "NewFiscalRecord",
    "keywords": "NewFiscalRecord",
    "description": "usecase new fiscal record"
},
{
    "id": 11,
    "name": "FiscalReports",
    "viewname": "Fiscal Reports",
    "level": "partition",
    "parent": "Accounting",
    "grandpa": "modules",
    "template": "FiscalReports",
    "keywords": "FiscalReports",
    "description": "partition Fiscal Reports",
    "usecases": {
    }
}

] and for grouping the results by 'grandpa' and 'parent' properties I've used lodash.js like the following:

var nest = function (seq, keys) {
        //console.log(keys.length)
        if (!keys.length)
            return seq;
        var first = keys[0];
        var rest = keys.slice(1);
        return _.mapValues(_.groupBy(seq, first), function (value) {
            return nest(value, rest)
        });
    };
var nested = nest(result, ['grandpa','parent']);

and return "nested" to the view inside ng-repeat, 'nested' is what the 'searchFor' filter returns:

<div ng-repeat="node in filteredModules = (modules | searchFor:searchString track by $index">    
    {{node.name}}    
</div>

but it causes this problem and I can't figure out why.

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"fn: regularInterceptedExpression","newVal":119,"oldVal":115}],[{"msg":"fn: regularInterceptedExpression","newVal":123,"oldVal":119}],[{"msg":"fn: regularInterceptedExpression","newVal":127,"oldVal":123}],[{"msg":"fn: regularInterceptedExpression","newVal":131,"oldVal":127}],[{"msg":"fn: regularInterceptedExpression","newVal":135,"oldVal":131}]]

note: when I return the results to the view without grouping the data, it doesn't cause that problem. and when printing 'nested' in the console without viewing it on the view, it works well and doesn't cause errors. here trying to explain more: https://jsfiddle.net/qw332bkc/

Edit: Is there another way to group the results by 'grandpa' and 'parent' properties?

Shizzle Shizzle · Accepted Answer · 2016-07-31T12:25:00

I've encountered this also

What solved this problem for me was filtering from the js script files without conducting the filtering action in the ng-repeat tag

So, in your case, the solution might be to create a filtering function within the controller, and that function will assign a sorted array to the $scope each time it's triggered. Then, from the ng-repeat just iterate throughout this array.

EDIT:

The problem is that you're creating a new array each time, so it's something new that angular needs to track. As far as I can tell, ng-repeat runs, then immediately checks its collection again to see if anything changed in that cycle. Because the function returns a new array, that is perceived as a change.

Taken from: AngularJS InfDig error (infinite loop) with ng-repeat function that returns array of objects

Infinite loops caused by ng-repeat and search filter results

1 Answers