使用Ajax / Jquery和JSON API加载图像
使用Ajax / Jquery和JSON API加载图像
提问于 2019-04-10 04:34:10
我需要获得JSON Spotify API的图像，以便在我的网站上以HTML格式显示它，但它不起作用。
这是我的Json数据
albums:
href: "https://api.spotify.com/v1/browse/new-releases?offset=0&limit=20"
items: Array(20)
0:
album_type: "album"
artists: [{…}]
available_markets: (79) ["AD", "AE", "AR", "AT", "AU", "BE", "BG", "BH", "BO", "BR", "CA", "CH", "CL", "CO", "CR", "CY", "CZ", "DE", "DK", "DO", "DZ", "EC", "EE", "EG", "ES", "FI", "FR", "GB", "GR", "GT", "HK", "HN", "HU", "ID", "IE", "IL", "IN", "IS", "IT", "JO", "JP", "KW", "LB", "LI", "LT", "LU", "LV", "MA", "MC", "MT", "MX", "MY", "NI", "NL", "NO", "NZ", "OM", "PA", "PE", "PH", "PL", "PS", "PT", "PY", "QA", "RO", "SA", "SE", "SG", "SK", "SV", "TH", "TN", "TR", "TW", "US", "UY", "VN", "ZA"]
external_urls: {spotify: "https://open.spotify.com/album/6KT8x5oqZJl9CcnM66hddo"}
href: "https://api.spotify.com/v1/albums/6KT8x5oqZJl9CcnM66hddo"
id: "6KT8x5oqZJl9CcnM66hddo"
images: Array(3)
0: {height: 640, url: "https://i.scdn.co/image/6c1f62bfe24b3cf4a0f1c61448eada0ae0d16dff", width: 640}
1: {height: 300, url: "https://i.scdn.co/image/4474d5589348da0cf40c67cdd834f0f775310a9d", width: 300}
2: {height: 64, url: "https://i.scdn.co/image/199419a7e64995280531641f4ccea2301c753ae9", width: 64}
length: 3
__proto__: Array(0)
name: "Free Spirit"
release_date: "2019-04-05"
release_date_precision: "day"
total_tracks: 17
type: "album"
uri: "spotify:album:6KT8x5oqZJl9CcnM66hddo"
__proto__: Object
1: {album_type: "single", artists: Array(1), available_markets: Array(79), external_urls: {…}, href: "https://api.spotify.com/v1/albums/7viSsSKXrDa95CtUcuc1Iv", …}
2: {album_type: "single", artists: Array(1), available_markets: Array(79), external_urls: {…}, href: "https://api.spotify.com/v1/albums/5mLjE4CPn8kNpzqNNslabJ", …}这是我的代码
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image"></div>
<script>
var accessToken = "XXX";
$.ajax({
url: 'https://api.spotify.com/v1/browse/new-releases',
type: 'GET',
dataType: "json",
headers: {
'Authorization' : 'Bearer ' + accessToken
},
success: function(data) {
console.log(data);
}
});
function jsonSpotifyAPi(json) {
$.each(albums.items, function(i, items) {
$("<img />").attr("src", albums.items.images).appendTo("#image");
});
};
</script>
</html>我需要从这个API在我的网站上显示相册图像。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-10 05:32:34
我已经创建了引导网格和图像将显示对齐。
经过测试，它可以正常工作。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
$(document).ready(function(){
var accessToken = "secret_token_here";
$.ajax({
url: 'https://api.spotify.com/v1/browse/new-releases',
type: 'GET',
dataType: "json",
headers: {
'Authorization' : 'Bearer ' + accessToken
},
success: function(data) {
console.log(data);
$.each(data,function(i,item){
//var len = item.items.length;
//for(var i=0;i < len;i++){}
$.each(item.items,function(i,tmp){
console.log(tmp.images[0].url);
$(".img1").append("<img src='"+tmp.images[0].url+"' />");
$(".img2").append("<img src='"+tmp.images[1].url+"' />");
$(".img3").append("<img src='"+tmp.images[2].url+"' />");
});
});
}
});
});
</script>
</head>
<body>
<style>
.img1,.img2,img3{ width:auto;height:auto; }
</style>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 img1">
</div>
<div class="col-md-6 img2">
</div>
<div class="col-md-6 img3">
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55600917
复制相关文章
相似问题