Om 使用 Angular 通过 API 显示来自 JSON 对象的数据。这是我的 Controller :
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>
我通过使用来 self 的测试 API 的原始数据作为 todoList.todos 和应该生成“真实”数据的函数作为 todoList.todos2 进行调试。
使用我的原始数据给出了正确的答案(每个 JSON 对象中的“内容”元素的列表)，但是使用 todo2 只给我列表中的两个空列表元素。
Controller 中的 URL 为我提供了正确的 JSON 数据，我已经检查过了。
您可以在此处查看工作时和不工作时的结果打印屏幕:http://imgur.com/a/Lvhvc
我哪里做错了？
最佳答案
$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");
});
});
关于javascript - 使用 Angular Controller 显示来自 API 的 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34596686/