javascript - 使用 json 数据异步填充 AngularJS ngTable

Question

我正在尝试构建一个 AngularJS 应用程序，它输出一个我用 json 填充的 HTML 表格(该表格的 HTML 位于该问题的底部)。我正在使用 application/json我从服务器检索的数据。

当我做一个简单的 curl http://myurl.local/todo/api/v1/tasks ，我得到 json 没有问题。如果我放一个 console.log();在这个 block 中，我显然是从服务器获取 json。

        getJson: function() {
            var url = 'http://myurl.local/todo/api/v1/tasks';
            var promise = $http.get(url);
            return promise.then(function(result) {
                console.log("Got data ->" + result.data);
                return result.data;
            });
        }

我正在使用 Chrome 开发应用程序；当我在 Chrome 中运行该应用程序时，Chrome 的 javascript 控制台抛出此错误:TypeError: Cannot read property 'length' of undefined在我开始之前 console.log("Got data ->" + result.data);线。这是一个竞争条件。

错误很明显就在这里:

        $scope.tableParams = new ngTableParams({
            page: 1,            // show first page
            count: 10,          // count per page
        }, {
            total: data.length, // length of data   <--- Broken, needs a promise?

问题是 javascript 不是我的主要语言(它是 Python)；基于我对这个问题所做的谷歌搜索，我想我可以通过 promise /.then() 来解决这个问题。在正确的地方。但是我很难理解我应该如何在我的 javascript 中实现它。我想找到修复异步 json GET 的方法，并理解为什么需要那样做。

有人可以解释我应该如何解决这个问题，以及为什么我应该这样做吗？

---

JavaScript:

    var App2 = angular.module('taskTable', ['ngRoute', 'ngTable']);
    // Need to change AngularJS symbols when using flask + Jinja
    App2.config(function($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    });

    // Thank you PeteBD
    //     http://stackoverflow.com/a/12513509/667301
    // Set up a controller to get json tasks...
    App2.factory('getTasks', function($http) {
        return {
            getJson: function() {
                var url = 'http://myurl.local/todo/api/v1/tasks';
                var promise = $http.get(url);
                return promise.then(function(result) {
                    return result.data;
                });
            }
        }
    });
    App2.controller('tableCntl', function($scope, getTasks, $filter, 
        ngTableParams) {

        var data = [];
        getTasks.getJson().then(function(data) {
            $scope.data = data;
        });
        data = $scope.data;
        // Set up task table parameters
        $scope.tableParams = new ngTableParams({
            page: 1,            // show first page
            count: 10,          // count per page
        }, {
            total: data.length, // length of data
            getData: function($defer, params) {
                // use build-in angular filter
                var orderedData = params.filter() ?
                       $filter('filter')(data, params.filter()) :
                       data;
                // store filtered data as $scope.tasks
                var pageCount = params.page();
                var paramCount = params.count();
                $scope.tasks = orderedData.slice((pageCount-1)*paramCount, 
                    pageCount*paramCount);
                // set total for recalc pagination
                params.total(orderedData.length);
                $defer.resolve($scope.tasks);
            }
        });
    });
    // Props... angular.bootstrap() is required if two apps on the same page
    // http://stackoverflow.com/a/18583329/667301
    angular.bootstrap(document.getElementById("Tasks"),["taskTable"]);

来自 ngTable 的 HTML 表格:

  <div id="Tasks" ng-app="taskTable" ng-controller="tableCntl">
    <p><strong>Filter:</strong> [[tableParams.filter()|json]]
    <table ng-table="tableParams" show-filter="true" class="table">
        <tbody>
          <tr ng-repeat="task in $data">
              <td data-title="'Description'" sortable="description" 
                  filter="{'description': 'text'}">
                  [[task.description]]
              </td>
              <td data-title="'Priority'" sortable="priority" 
                  filter="{'priority': 'text'}">
                  [[task.priority]]
              </td>
              <td data-title="'Entered'" sortable="entry">
                  [[task.entry]]
              </td>
              <td data-title="'Status'" sortable="status">
                  [[task.status]]
              </td>
          </tr>
        </tbody>
    </table>
  </div>

Answer 1

绝对值得一看ngResource - 这将简单地为您完成所有繁重的工作。

另一方面，我怀疑您不需要这样做:

App2.factory('getTasks', function($http) {
    return {
        getJson: function() {
            var url = 'http://myurl.local/todo/api/v1/tasks';
            var promise = $http.get(url);
            return promise.then(function(result) {
                return result.data;
            });
        }
    }
});

我会把它改成:

 App2.factory('getTasks', function($http) {
    return {
        getJson: function() {
            var url = 'http://myurl.local/todo/api/v1/tasks';
            return $http.get(url);
        }
    }
});

作为 $http 返回 promise 。这意味着这个位仍然有效:

    getTasks.getJson().then(function(data) {
        $scope.data = data;
    });