AngularJS improve filtering for nested arrays

Question

First of all, I have some kind of a working solution, but I'm just asking if I can tune it up for better performance. So, I have nested arrays structure looking like this:

$scope.clients = [
{
    name: "Ivan Drew",
    age: 21,
    company: "HP",
    apps: [
        {
            appName: "Facebook",
            used: "Y",
            installedDate: "21/12/2014"
        },
        {
            appName: "Instagram",
            used: "N",
            installedDate: "14/12/2014"
        }
    ]
},
{
    name: "John Roberts",
    age: 35,
    apps: [
        {
            appName: "Messenger",
            used: "Y",
            installedDate: "01/01/2015"
        },
        {
            appName: "Facebook",
            used: "Y",
            installedDate: "09/11/2014"
        },
        {
            appName: "Instagram",
            used: "Y",
            installedDate: "20/10/2014"
        }
    ]
},
{
    name: "Richard James",
    age: 28,
    apps: [
        {
            appName: "Instagram",
            used: "N",
            installedDate: "15/11/2014"
        }
    ]
}
];

Now, I want to filter this list to show the clients who have installed e.g. Facebook app and had been using it (used property shows this). So I want to show the list like this:

Ivan Drew
Facebook
21/12/2014

John Roberts
Facebook
09/11/2014

I created my html with two ng-repeat to look like this:

<div class="client-info" ng-repeat="client in clients">
    <div ng-repeat="app in client.apps | filter: { name: 'Facebook', used: 'Y' }">
        {{ client.name }}<br />
        {{ app.appName }}<br />
        {{ app.installedDate }}<br />
    </div>
</div>

So, as I said above, this works as expected, but I checked it when you have a lot of information (e.g. 1000 clients with 5 apps at least for each one) it get laggy a lot. So I checked what is the output for this and saw that .client-info elements are shown (empty of course), even though none of the apps match the requirements. I was thinking about how to optimize it, but came up short for now.

Anybody has some ideas how to make it better?

Thanks in advance! :)

Answer 1

You have several options to improve performance.

Bind only once using the :: syntax (assuming you don't need 2 way binding).

<div ng-repeat="app in ::client.apps | filter: { name: 'Facebook', used: 'Y' }">
    {{ ::client.name }}<br />
    {{ ::app.appName }}<br />
    {{ ::app.installedDate }}<br />
</div>

If you are using Angular < 1.3, you need the 3rd party bind-once library, which has a different syntax.

If you are really only filtering by the hard coded filter as in the example, you could filter your data before it gets to the view (in the controller, or better yet, in the service that retrieves the data). This will prevent Angular from reevaluating your filter in every digest loop.

You can also use the track by syntax to improve performance. In this case, I'm guessing by client.name (but it's just a guess):

ng-repeat="app in ::client.apps | filter: { name: 'Facebook', used: 'Y' } track by client.name

You may need to tweak that if the client names are not unique.

I suspect implementing just bind once will give you significant performance gains.

Answer 2

In you controller, instead of sending whole object you can filter and then send it to view. Something like this;

        function filter(element, appName) {
            var retArr = [];
            if(element.length > 0) {
                for(i = 0 ; i < element.length ; i++){                        
                    var arrAppend = element[i];

                    if(arrAppend.apps.length > 1) {
                        for(j = 0 ; j < arrAppend.apps.length ; j++) {
                            if(arrAppend.apps[j]['appName'] == appName && arrAppend.apps[j]['used'] == 'Y') {
                                retArr.push(arrAppend);
                                break;
                            }
                        }
                    }

                }
            }

            return retArr;

        }
        $scope.clients = filter($scope.clients, 'Facebook'));

Or if you have jquery you can make use of $.grep