我正在使用 API 来搜索歌曲，但我只想通过使用 angular.js 中的表达式来简单地显示 html 文件中数组中的 1 首歌曲。现在我遇到了一些问题，因为我想在 AJAX 调用之外和 Controller 中使用我的 JSON 对象。
(function() {
var app = angular.module('songSelector', []);
app.controller('playedTracksCtrl', function() {
// this.songs = jsonObjectPlayedTracks;
$.ajax({
url: "http://api.q-music.be/1.2/tracks/plays?limit=20",
dataType: "jsonp",
jsonp: "callback",
success: function(jsonObject){
//console.log(jsonObject);
//console.log(jsonObject["played_tracks"][0]);
var jsonObjectPlayedTracks = jsonObject["played_tracks"];
console.log(jsonObjectPlayedTracks);
}
});
});
})();
<!DOCTYPE html>
<html ng-app="songSelector">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header>
<h1 class="text-center">Vind info over de laatste 50 liedjes</h1>
<h2 class="text-center"> - vul in - </h2>
</header>
<div class="list-group" ng-controller="playedTracksCtrl as overzicht">
<div class="list-group-item">
<h3>{{overzicht.songs[0].title}}</h3>
</div>
</div>
<p> {{"Hello, Angular!"}} </p>
</body>
</html>
最佳答案
如果要进行ajax调用，需要使用$http或$resource:
(function() {
var app = angular.module('songSelector', []);
app.controller('playedTracksCtrl', ['songService', playedTraksCtrl]);
app.service('songService', ['$http', songService])
function playedTraksCtrl(songService) {
var vm = this;
vm.songs = {};
songService.getPlays().then(function (data) {
vm.songs = data;
});
}
function songService($http){
var service = {
getPlays: getPlays
};
return service;
function getPlays(){
return $http.get('http://api.q-music.be/1.2/tracks/plays?limit=20')
.then(function (data) {
return data.data;
}).catch(function (message) {
console.log(message)
});
}
}
})();
Angular 会为您整理 JSON。
我来分解一下:
function songService($http){
var service = {
getPlays: getPlays
};
return service;
}
这将返回一个对象:
{
getPlays: function () {}
}
上面的函数是我们在返回服务后创建的函数；:
function getPlays(){
return $http.get('http://api.q-music.be/1.2/tracks/plays?limit=20')
.then(function (data) {
return data.data;
}).catch(function (message) {
console.log(message)
});
}
如您所见，该函数立即返回另一个函数的结果:$http.get()。结果是一个Promise。 Promise 表示，当结果返回时，将关闭函数。
我们需要告诉Promise我们想要在服务和 Controller 中做什么。所以在服务中:
.then(function (data) {
return data.data;
}).catch(function (message) {
console.log(message)
});
.then() 基本上表示，当 Promise 解析 then 时触发此函数。该函数有一个参数(实际上有很多参数，但我大多数时候只关心数据)。数据有很多属性，我们感兴趣的是 API 的结果是 data。所以我们所做的就是将其返回。
此 Promise 链，因此在 Controller 中，我们可以调用另一个 .then()。当服务中的调用结束时会触发此事件。
songService.getPlays().then(function (data) {
vm.songs = data;
});
此时我们知道，数据只是作为我们可以使用的 JS 对象的 JSON 对象。因此，我们只需将其分配给 vm.songs 属性即可。
记住
之所以存在 Promise 是因为该调用是异步的，因此如果您看到空格，那是因为该调用尚未完成解析。当它执行时，它将调用 then() 函数。
关于javascript - 使用ajax成功函数中的json对象(使用angularjs)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28107749/