我试图让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。
我是一个开发的初学者,所以我相信它可能很简单。
谢谢!
发布于 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>
https://stackoverflow.com/questions/50956299
复制相似问题