Question

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

'3 of 9 Barcode'

这是我的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

我使用我的测试API中的原始数据作为<!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>进行调试，以及应该生成＆＃34; real＆＃34;的函数。数据为todoList.todos。

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

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

您可以在工作时看到结果上的版画屏幕而不在此处工作：http://imgur.com/a/Lvhvc

我在哪里做错了？

Answer 1

$ http服务返回一个promise，它不会返回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");
       });
});

Answer 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();
    }
]);

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

使用Angular控制器显示API中的JSON数据

2 个答案: