Takes lot of time to render large json data

Question

     $http.get('resturl').success(function (data) { //makes a rest call here
          $scope.myData = data;
     });

The data loads in grid only after request completes. I have very large data so this makes user to wait for 2 min - 3 min to load grid. Is there a way to render large data quickly ?

Use pagination http://angular-ui.github.io/ng-grid/ :Server Side pagination example — Vivek Vardhan, Apr 22 '15 at 08:40
It seems like your problem is with your grid(or perhaps your server's response is just too slow) - at any rate, it's hard to know with the information you've provided. — Sacho, Apr 22 '15 at 08:40

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

Use pagination data in server side for large data sets and show it to your users with a paginated grid.

In this question you have an example of paginated nggrid

edited May 23 '17 at 11:58

Community

1
1

answered Apr 22 '15 at 08:43

José Ricardo Pla

1,043
10
16

Using pagination did not help. when i change page it makes again request and again takes time to fetch data. – user2515138 Apr 22 '15 at 09:58
This "paginated" request will fetch only the required data to be show in a single page of the grid. – José Ricardo Pla Apr 22 '15 at 10:19

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Oneway binding makes things faster use :: see Simple One way binding for ng-repeat? , can you reduce your data? also look at paging ?

Is your server slow, I have found that doing something like

$http.get('resturl').success(function (data) { //makes a rest call here
          console.log("Request Complete");
          $scope.myData = data;
          $timeout(function () { console.log("Binding complete"); });
     });

The log in the timer will get executed once the binding is complete.

Understanding the contents your grid will also help.

edited May 23 '17 at 12:22

Community

1
1

answered Apr 22 '15 at 08:46

Steve Drake

1,968
2
19
41

1

The contents are text...also paging did not help. – user2515138 Apr 22 '15 at 09:58

score 0 · Answer 3 · answered Apr 28 '15 at 06:32

$scope.pagingOptions = {

pageSizes: [5, 7,10, 20],

pageSize: 7,

currentPage: 1

};



$scope.setPagingData = function(data, page, pageSize)
 {

var pagedData = data.slice((page - 1) * pageSize, page * pageSize);

$scope.myData = pagedData;

$scope.totalServerItems = data.length;

if (!$scope.$$phase) {

$scope.$apply();

}

};

$scope.getPagedDataAsync = function(pageSize, page, searchText) {

setTimeout(function() {

var data;

if (searchText) {

var ft = searchText.toLowerCase();

$http.get('largeLoad.json').success(function(largeLoad) {

data = largeLoad.filter(function(item) {

return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;

});

$scope.setPagingData(data, page, pageSize);

});

} 
else {

$http.get('largeLoad.json').success(function(largeLoad) {

$scope.setPagingData(largeLoad, page, pageSize);

var myData =  $.parseJSON(JSON.parse(largeLoad));

$scope.myData  =  myData; 

});


}

}, 100);

};


$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);


$scope.$watch('pagingOptions', function(newVal, oldVal) {

if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {

$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

}

}, true);

may be this code will help you for providing pagination too with fast loading of JSON data.

Takes lot of time to render large json data

3 Answers3