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

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

Parse attributes property

<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

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.

Tech enthusiast

Tech enthusiast