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

Using a Angular controller to show JSON data from API

本文关键字：JSON 数据 API 显示 Angular 控制器 使用      更新时间：2023-09-26

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数据，我已经检查过了。

在这里工作和不工作时，您可以在结果上看到打印屏幕：https://i.stack.imgur.com/AWKN9.jpg

我哪里做错了？

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

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

$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方法，这些方法可以自动处理插入、更新和删除。

相关文章：