需要大量时间来渲染大型 json 数据答案

【问题标题】：Takes lot of time to render large json data需要大量时间来渲染大型 json 数据
【发布时间】：2015-04-28 14:32:10
【问题描述】：

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

只有在请求完成后才会在网格中加载数据。我有非常大的数据，所以这使用户等待 2 分钟 - 3 分钟来加载网格。有没有办法快速渲染大数据？

【问题讨论】：

服务器端好像有问题
使用分页angular-ui.github.io/ng-grid：服务器端分页示例
您的问题似乎出在您的网格上（或者您的服务器响应太慢了）——无论如何，您提供的信息很难知道。

标签： angularjs ng-grid

【解决方案1】：

在服务器端为大型数据集使用分页数据，并通过分页网格向用户显示。

在这个问题中，您有一个 example 的分页 nggrid

【讨论】：

使用分页没有帮助。当我更改页面时，它再次发出请求并再次花费时间来获取数据。
这个“分页”请求将只获取在网格的单个页面中显示所需的数据。

【解决方案2】：

单向绑定使事情更快使用:: 见 Simple One way binding for ng-repeat? ，你能减少你的数据吗？还看分页？

你的服务器很慢吗，我发现做类似的事情

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

一旦绑定完成，计时器中的日志将被执行。

了解网格的内容也会有所帮助。

【讨论】：

内容是文本...分页也没有帮助。

【解决方案3】：

$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);

也许这段代码也可以帮助您通过快速加载 JSON 数据来提供分页。

【讨论】：