使用 Angular 控制器显示来自 API 的 JSON 数据答案

【问题标题】：Using a Angular controller to show JSON data from API使用 Angular 控制器显示来自 API 的 JSON 数据
【发布时间】：2016-01-05 02:04:22
【问题描述】：

Om 使用 Angular 显示来自 API 的 JSON 对象的数据。这是我的控制器：

angular.module('todoApp', []).controller('ListController', function($http) {
    var todoList = this;

    todoList.todos = [{"id":1,"uname":"BluePrint","pname":"Birdie","content":"DHSvahdgsvadjavsdj","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":2,"uname":"BluePrint","pname":"Fiskpinne","content":"gggggggggggggggggggg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":3,"uname":"BluePrint","pname":"KulGrej","content":"hdbjsdhfgjsdhfg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":4,"uname":"Howken","pname":"KulGrej","content":"xczzzzz","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":5,"uname":"Howken","pname":"Birdie","content":"aaaaaaaaaaaaaaaaaa","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":6,"uname":"Howken","pname":"Fiskpinne","content":"\u00e5\u00e4\u00f6\u00e5\u00e4\u00f6\u00e5","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":7,"uname":"Howken","pname":"KulGrej","content":"sssssggggg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"}];
    console.log([{"id":1,"uname":"BluePrint","pname":"Birdie","content":"DHSvahdgsvadjavsdj","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":2,"uname":"BluePrint","pname":"Fiskpinne","content":"gggggggggggggggggggg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":3,"uname":"BluePrint","pname":"KulGrej","content":"hdbjsdhfgjsdhfg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":4,"uname":"Howken","pname":"KulGrej","content":"xczzzzz","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":5,"uname":"Howken","pname":"Birdie","content":"aaaaaaaaaaaaaaaaaa","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":6,"uname":"Howken","pname":"Fiskpinne","content":"\u00e5\u00e4\u00f6\u00e5\u00e4\u00f6\u00e5","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"},{"id":7,"uname":"Howken","pname":"KulGrej","content":"sssssggggg","completed":0,"removed":0,"added":"2015-12-30 16:30:52","deadline":"2015-12-30 16:30:52"}]);

    todoList.todos2 = 
        $http({method : 'GET',url : 'http://localhost:8000/notes'})
            .success(function(data, status) {
                console.log(data);
                return [data];
            })
            .error(function(data, status) {
                alert("Error");
            });
});

这是我的html：

<!doctype html>
<html ng-app="todoApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="/js/ListController.js"></script>
  </head>
  <body>
    <h2>Todo</h2>
    <div ng-controller="ListController as todoList">
      <ul class="unstyled">
        <li ng-repeat="todo in todoList.todos2">
          {{ todo.content }}
        </li>
      </ul>
    </div>
  </body>
</html>

我正在使用来自我的测试 API 的原始数据作为 todoList.todos 和应该生成“真实”数据的函数作为 todoList.todos2 进行调试。

使用我的原始数据给出了正确的答案（每个 JSON 对象中的“内容”元素的列表），但使用 todo2 只会给我列表中的两个空列表元素。

控制器中的 URL 为我提供了正确的 JSON 数据，我已经检查过了。

您可以在这里看到工作和不工作时的打印屏幕：http://imgur.com/a/Lvhvc

我哪里做错了？

【问题讨论】：

为什么要返回 [data] 而不是 data？
你试过$http({method : 'GET',url : 'http://localhost:8000/notes'}) .success(function(data, status) { console.log(data); this.todoList.todos2 = data; }) .error(function(data, status) { alert("Error"); });
@IgnacioChiazzo 我正在做一些试验和错误，看看我是否能找出问题所在。我一开始只有data，我只是忘记在发帖之前去掉括号......
如果您的 api 返回 JSON，我建议您使用 $resource 而不是 $http。

标签： javascript angularjs json

【解决方案1】：

$http 服务返回一个承诺，它不返回 JSON 数据。

这里是$http服务的使用。

angular.module('todoApp', []).controller('ListController', function($http) {
    var todoList = this;

    $http({method : 'GET',url : 'http://localhost:8000/notes'})
       .then(function(response) {
           console.log(response.data);
           todoList.todos2 = response.data;
       }, function() {
           alert("Error");
       });
});

【讨论】：

.success 和 .error 方法已弃用 -- docs.angularjs.org/api/ng/service/$http#deprecation-notice
.then 方法返回的响应对象不是(data, status)。请阅读文档。
应该是.then (function (response) { todolist.todos2 = response.data; });

【解决方案2】：

.success 和 .error 函数已被弃用，$http 返回一个通过响应对象解析的承诺，因此：

$http.get(...).then(function(res) {
    todoList.todos2 = res.data;
}).catch(e) {
    alert(e);
});

但是我强烈建议您调查 $resource 而不是直接使用 $http：

app.factory('TodoResource', ['$resource',
    function($resource) {
        return $resource('/notes', {}, {
            query: { isArray: true }
        });
    }
]);

然后将 TodoResource 注入您的控制器：

app.controller('ListController', [$scope, 'TodoResource',
    function($scope, TodoResource) {
        $scope.todos2 = TodoResource.query();
    }
]);

然后您可以将 RESTful 方法添加到自动处理插入、更新和删除的 TodoResource 对象。

【讨论】：