使用 AngularJS 加载大型数据集 [英] Loading large datasets with AngularJS

问题描述

我正在尝试设计一种无需分页即可将大量数据(超过 1000 行)加载到页面中的方法.这其中的第一个障碍是以并行大小的块查询数据库，这是我在 如何使用 AngularJS 进行顺序 Rest webservices 调用?

I'm trying to devise a way to load large amounts of data (upwards of 1000 rows) into a page, without pagination. The first hurdle in this was to query the DB in parallel bite sized chunks, which I've done with the help of the solution at How to make sequentially Rest webservices calls with AngularJS?

然而，我在实施的过程中遇到了两个问题:

I'm running into two problems with what I've implemented however:

1. 每个返回的对象都被传递到一个数组中，然后该数组本身作为 Angular 用于绑定的数组返回.即 [[{key:value, key:value, key:value}, {key:value, key:value, key:value}], [{key:value, key:value, key:value}, {key:value, key:value, key:value}]] 因此我不能使用 ng-repeat="item in data" 因为数据是一个数组数组.执行数据中的项目[0]"确实使项目可用.串联似乎是答案，但我一直无法找出使其工作的方法.

1. Each returned object is being passed into an array which is then itself returned as the array that Angular uses to bind. i.e. [[{key:value, key:value, key:value}, {key:value, key:value, key:value}], [{key:value, key:value, key:value}, {key:value, key:value, key:value}]] As such I can't use ng-repeat="item in data" because data is an array of arrays. Doing "item in data[0]" does make item available. Concatenation seems to be the answer but I haven't been able to sort out a way that makes it work.

我向数据库发出多个请求，每个请求都被正确返回，但页面在所有请求完成之前不会呈现——这完全否定了首先执行多个请求的意义.

I'm making multiple requests to the database and each request gets returned correctly but the page doesn't render until all the requests have completed -- which completely negates the point of doing multiple requests in the first place.

那么查看我的代码，我怎样才能重新编写它来解决这两个问题?那么数据作为一个数组返回，并且每次查询完成时都会呈现该数据?

So looking over my code, how can I re-write it to solve these two issues? So that data is returned as one array and that data is rendered every time a query is completed?

app.factory('ScanService', function($http, $q) {
  function fetchOne(stepCount) {
    return $http({
      method: 'GET',
      url: '/index.php/scans',
      params: {step:stepCount}
    })
    .then(function onSuccess(response) {
      return response.data;
    }
    return {
      fetchAll: function(steps) {
        var scans = [];
        for (var i = 1; i <= steps; i++) {
          scans.push(fetchOne(i));
        }
        return $q.all(scans);
      }
    };
});

app.controller.ScanCtrl = function($scope, $q, ScanService) {
  $scope.scans = ScanService.fetchAll(10);
};

<小时>

跟进

我应该补充一点，我确实根据下面的解决方案和 angular.forEach() 设法使这项工作正常进行.不能建议任何使用大数据"的人走这条路.在大约 1000 行时，浏览器不堪重负并开始显着变慢.尝试使用 angular.filter 进行过滤也经历了明显的延迟，直到结果缩小.另一方面，几百行工作得相当好，并允许本地过滤 - 这是我实现的一个关键目标.

I should add that I did manage to get this working based on the solution below and an angular.forEach(). Can't suggest anyone working with "big data" go this route. At around 1000 rows, the browser was overwhelmed and began slowing down considerably. Trying to filter with angular.filter also experienced a significant delay until the results were narrowed down. On the other hand, a few hundred rows worked respectably well and allowed native filtering - which was a key goal for my implementation.

推荐答案

如果你想对待每一个承诺，你真的不能把所有的承诺放在一起(这使得它们成为一个成功或失败的大承诺)单独(单独显示每个).

You can't really $q.all the promises together (which makes them into one big promise that succeeds or fails together) if you want to treat each one individually (display each one individually).

你拿到的东西我会尽快把它们推回范围.下面是一个例子:

I would push the things you get back into the scope as soon as you get them. Below is an example:

    function MyCtrl($scope, $timeout, $q) {
        var fetchOne = function() {
            var deferred = $q.defer();
            $timeout(function() {
                deferred.resolve([random(), random() + 100, random() + 200]);
            }, random() * 5000);
            return deferred.promise;
        };

        $scope.scans = [];
        for (var i = 0; i < 2; i++) {
            fetchOne().then(function(items) {
                angular.forEach(items, function(item) {
                    $scope.scans.push(item);
                });
            });
        };
    }

这是一个显示它在行动中的小提琴:http://jsfiddle.net/wWcvx/1/

Here's a fiddle showing it in action: http://jsfiddle.net/wWcvx/1/

这里存在一个问题，即商品的顺序是基于退货时间，而不是您的原始请求订单.我会让你自己弄清楚.

There's an issue here where the order of the items are based on when they were returned, not on your original request order. I'll let you figure that one out yourself.

这篇关于使用 AngularJS 加载大型数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！