Performance of ngFilter and Parse

Combining AngularJS and Parse introduces a few challenges. Here are two excellent posts to get you started. After that, I ran into bad performance when filtering a list of Parse objects with ngFilter. Let’s solve that.


Parse objects

First off, let’s have a look at a Parse object:

Quick glance at a Parse object

As you can see, it’s quite bulky. By default, ngFilter will match any property of an object. So, Angular looks at all properties and their inner properties, etc. This is clearly our performance breaker.


Solution

We want to tell Angular to not look at every property, for which ngFilter has support out of the box. However, in my case, I want to search multiple fields with an OR operator, having only one input field for the search. In order to achieve this you can do two things.

Parse attributes property

Parse objects have a property called attributes. This property contains an object with only the attributes of this object:

<div ng-controller="MyCtrl">
<input type="text" ng-model="search.attributes">
<ul>
<li ng-repeat="item in items | filter:search">
{{item.field}}
</li>
</ul>
</div>

If you have a flat object with no relationships to other objects, this will probably be sufficient for you. If not: read on…

Explicitly define filter fields

In my case, the Parse objects had relationships to other Parse objects, making Angular search those objects too. The solution above improved the performance, but not yet satisfactory.

Another solution is to make your filter fields explicit by adding a new property to your Parse objects:

angular.forEach(items, function(value) {
value.filterFields = {
'field1': value.field1,
'field2': value.field2,
'field3': value.relation.field3,
...
}
});

Then, in your ngModel, you can filter on filterFields only.

<div ng-controller="MyCtrl">
<input type="text" ng-model="search.filterFields">
<ul>
<li ng-repeat="item in items | filter:search">
{{item.text}}
</li>
</ul>
</div>

For me, this solved my performance problem for ngFilter with Parse objects. In my case, the data is read-only, so this is sufficient. Please be aware that when you have two-way binding on the fields you filter on using this last approach, the filter fields are not automatically updated in this solution.

Like what you read? Give Jasper Kuperus a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.