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
);
}
};
Written by patrice
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Angularjs
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#