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! :)

For improved performance, all you need to do is simply replace Angular entirely with React.js — Code Whisperer
– Code Whisperer, Commented Jan 21, 2015 at 20:28

Noel · Accepted Answer · 2015-01-21 20:32:41Z

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.

answered Jan 21, 2015 at 20:32

Noel

3,6361 gold badge28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GBak Over a year ago

Yeah, I thought about filtering the array before displaying it in the controller as you said. But there seems to be a problem for my case - I need to return the filtered client list and in each contact filtered apps list too, which is little bit problematic, in my point of view. In that case I will just be showing the info without doing anything in the html. I know about bindonce feature but the data will be updated, so I need to keep watchers... I know if there isn't such a thing I will be using it.

Prabhu · Accepted Answer · 2015-01-21 20:48:11Z

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

Collectives™ on Stack Overflow

AngularJS improve filtering for nested arrays

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related