Last Updated: February 25, 2016
·
5.04K
· patrice

Loading big dataset quickly in angularjs

I needed to load a big dataset without using the classic ajax-loader.gif with angularjs.
The problem is that angularjs has limited performance when it comes to render the view using $rootScope.$digest().
So when you try to render a big dataset, the view would hang while it's rendering.

I ended up slicing the dataset with enough records to fill up the visible part on the view and then load everything using a timeout. This kind of simulates instantaneous loading.

The data could be ordered on the view, so I needed to load as much as possible in one go, otherwise the user could see live reordering of the dataset.

//Variable to hold the deferred function    
var loadAll;
$scope.loadAllData = function() {

    //Give a max of 40 rows to the view
    if ( $scope.bigdata.length > 40 ) {
        $scope.dataView = $scope.bigdata.slice(0,39);
    } else {
        $scope.dataView = $scope.bigdata;
    }

    //Cancel previous deferred function
    if(loadAll !== undefined) {
        $timeout.cancel(loadAll);
    }

    //Will load all the rest of data after 1.5s
    loadAll = $timeout(function() {
                        $scope.dataView = $scope.bigdata;
                    }, 1500);

};

If your dataset has no need for ordering or if you don't mind, prefer the solution with a recursive call :

//Variable to hold the deferred function    
 var start,end = 0;
 var ls = 40; //Length of subset
 $scope.loadAllData = function() {

     end+= ls;

     if ( end < $scope.bigdata.length ) {
         $scope.dataView = $scope.bigdata.slice(start,end);
         start+= ls;
         $timeout(function() {
                         $scope.loadAllData();
                     }, 100);
      } else if (end > $scope.bigdata.length 
                     && start < $scope.bigdata.length) { //last load
          $scope.dataView = $scope.bigdata.slice(
                                        start, $scope.bigdata.length - 1
                                       );
      }

 };