Last Updated: February 25, 2016
·
5.368K
· 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
                                       );
      }

 };

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside