Performance limitations of angular filters on mobile

I have 3000 objects each with a number of properties creating a 72,000 line 2MB JSON file.

The JSON is effectively a database of objects that need to be filtered by a text search filter and also by matching values against an array of values.

In the initial view I perform this in my service:

  this.loadJsonFile = function(url, process) {
    var defer = $q.defer();
    if (angular.isDefined(cache[url])) {
      if (angular.isDefined(cache[url]['then'])) {
        return cache[url];
      }
      defer.resolve(cache[url]);
      return defer.promise;
    }

    $http.get(url).success(function(data) {
      if (process) {
        data = process(data);
      }
      cache[url] = data;
      defer.resolve(data);
    }).error(function(err){
      defer.reject(err);
    });
    cache[url] = defer.promise;
    return defer.promise;
  };

  this.getExercises = function() {
    return this.loadJsonFile('data/exercises.json');
  };

and in my controller all results are exposed to $scope by:

api.getExcercises().then(function(data) {
  $scope.allExercises = data.results;
});

I limit results by :

$scope.limit = 56;

Previously I have stayed away from calling the server every time I need to search as the number of calls would be very high! This works ok on an iPad Air 2 and iPhone 6 where there is plenty of power, however on a Galaxy Tab it is pretty poor.

I need help on a strategy of only exposing a limited number of results to the $scope as I think the shear amount of data being filtered and churned around is causing my poor performance. I am fine with a search / filter function being run and breaking the seamless nature of the live search feature so long as when the results are exposed to $scope (following a loading screen say) the performance is really sharp.

Looking into the server situation I am not keen on hitting my Parse.com server as its not that Angular friendly, however the Async nature of Firebase might work. I have simply uploaded my JSON and attached the data to the $scope via :

var ref = new Firebase("https://URL_HERE.firebaseio.com/results"); 
$scope.allExercises = $firebaseArray(ref);

Which works pretty similarly to my local JSON method. However I wonder if it is possible to perform the following using Firebase?

  1. Load an initial 50 results ordered by Name.
  2. When typing in the text search a Query is performed and the $scope is delivered the results.
  3. When adding values to the filter array the data on Firebase is queried against the values and results exposed to the $scope.

Please take some time to go through the Firebase guide. It will prevent many questions, that are answered there already.

  1. Yup, something like:

    ref.orderByChild('name').limitToFirst(50);
    
  2. You'd have to run a query like:

    ref.orderByChild('name').startAt(searchString).limitToFirst(50);
    

    Note that Firebase querying does not support wildcard searches. See the guide's section on querying for more info.

Your problem is that your number of watchers is enormous on your datas, and having automatic filters creates even more watchers that are called twice.

I suggest you to implement a database and a Search capability.

For a free solution (as FireBase is paid) I suggest you to use a sqlite database with the cordova sqlite plugin

This is working pretty well on android and ios and, with some work on Windows Phone too ;)