为什么我在DOM上得到的是{"readyState":1}，而不是AngularJS中的JSON数据？
为什么我在DOM上得到的是{"readyState":1}，而不是AngularJS中的JSON数据？
提问于 2018-06-21 04:10:08
我试图让JSON数据显示在DOM上(它只有49项)，但我得到的是{"readyState":1}。我这样做主要是为了测试我的代码是否正常工作。
我知道代码中的问题所在，但我不知道语法应该是什么。
所以我的问题是，为了让$scope.dogs数据显示在页面上，我应该如何定义JSON？我在'mainCtrl'控制器中的超文本标记语言中有{{dogs}}。
下面是JS文件：
const app = angular.module('dogBreedApp', []);
app.controller('mainCtrl', function($scope) {
$scope.dogs = $.ajax(settings).done(function (response) {
});
});
var settings = {
"async": true,
"crossDomain": true,
"url": "https://dogdatabase-d31f.restdb.io/rest/dogs",
"method": "GET",
"headers": {
"content-type": "application/json",
"x-apikey": "xxxxxxxxxxxxxxxxxxxxxx",
"cache-control": "no-cache"
}
}
$.ajax(settings).done(function (response) {
console.log(response);
});设置变量和ajax内容是从我从中提取JSON的restdb.io服务复制并粘贴的，它可以很好地记录JSON。
我是一个开发的初学者，所以我相信它可能很简单。
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-21 04:32:35
如果要使用AngularJS，我建议使用Angular的AJAX方法，而不是jQuery的方法。这里有一种你可以做到的方法。如果您将$http调用放在服务中，那么您可以返回promise并在控制器中处理promise解析。当像我在这里所做的那样使用this语法时，您需要将promise放在一个局部变量中，因为在promise解析中，this将引用promise而不是控制器，如果这有意义的话。对于HTML语言中的输出，我使用了json过滤器，这样它将以缩进和换行符的形式显示，而不仅仅是一个长字符串。
angular.module('app', [])
.service('dogsService', function($http) {
var service = {};
service.getDogs = function() {
return $http.get('https://dogdatabase-d31f.restdb.io/rest/dogs', {headers: {
'x-apikey': 'xxxxxxxxxxxxxxxxxxxxxx'
}
}).then(response => response.data);
};
return service;
})
.controller('ctrl', function(dogsService) {
var _this = this;
this.dogs = [];
dogsService.getDogs().then((data) => {
_this.dogs = data;
}).catch((error) => {
console.error(error);
});
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as $ctrl">
<pre>{{$ctrl.dogs | json}}</pre>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50956299
复制相关文章
相似问题