在 ajax 中使用 json 对象成功函数(使用 angular.js)
Using a json object out of ajax succes function (Using angular.js)
我正在使用 API 来搜索歌曲,但我只想通过使用 angular.js 中的表达式简单地显示 html 文件中数组中的 1 首歌曲。现在我遇到了一些问题,因为我想在 AJAX 调用和控制器中使用我的 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 () {}
}
上面的函数是我们在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)
});
}
如您所见,此函数立即返回另一个函数的结果:$http.get()
。结果是Promise
.一个Promise
说,当结果回来时,会关闭一个函数。
我们需要告诉Promise
我们想在服务和控制器中做什么。所以在服务中:
.then(function (data) {
return data.data;
}).catch(function (message) {
console.log(message)
});
.then()
基本上是说,当Promise
解析时then
触发此函数。该函数有一个参数(实际上很多参数,但我大部分时间只关心数据)。数据上有很多属性,我们感兴趣的是 API 的结果是data
.所以我们所做的就是把它归还出去。
这Promise
链,因此在控制器中,我们可以调用另一个.then()
。当服务中的呼叫完成时,将触发此命令。
songService.getPlays().then(function (data) {
vm.songs = data;
});
到此为止,我们知道数据只是 JSON 对象作为我们可以使用的 JS 对象。因此,我们只需将其分配给vm.songs
属性。
记得
存在Promise
是因为调用是异步的,因此如果您看到空格,那是因为调用尚未完成解析。当它这样做时,它将调用该then()
函数。
相关文章:
- 模拟chrome.storage.local函数使用Jasmine
- 对其他函数使用匿名函数's参数
- 表单中的数据不会传递给提交函数-使用Angular
- Node.js设计:多个异步函数使用作为闭包传递的函数写入数据库
- 函数使用 jquery 还原
- 删除两个函数使用的全局变量
- 从多个文件中推送文本的函数(使用html5文件读取器上传)返回数组
- 回调函数/使用.addClass添加类后运行函数
- 如何在JavaScript中跨多个函数使用全局变量
- 从指令调用控制器函数(使用从指令传递的参数)
- 提取并调用在元素的 onclick HTML 属性中定义的 JavaScript 函数(使用 jQuery attr/p
- 如何实例化其构造函数使用 yield 的对象
- 通过匿名函数使用 setInterval 的更好方法
- 在 ajax 中使用 json 对象成功函数(使用 angular.js)
- 两个函数使用相同的变量,都不会覆盖其原始变量
- 未定义不是这个和自我的函数使用
- JavaScript函数 - 使用引号内的参数
- 对多个函数使用相同的参数
- 如何在 Javascript 中添加和调用来自构造函数的函数(使用 JQuery)
- JavaScript undefined不是一个函数(使用splice函数)