无法使用 javascript 从 json 获取 url
Can't get url from json using javascript
我正在尝试使用 last.fm 的 spotify scrobble api 将 url 设为我最近播放的歌曲的专辑图片。我能够获取歌曲名称和艺术家,但歌曲专辑图片的 link 文本返回 "object%20Object" 或 "object Object"。
var img = new Image();
img.setAttribute("src", $.get("https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=plggs&api_key=MY_API_KEY&limit=1&format=json", function (data, status) {
$("#album-art").html(data["recenttracks"]["track"][0]["image"][2]['#text']);
}));
img.setAttribute("class", "album-img");
img.setAttribute("alt", "album");
document.getElementById("album-art-div").appendChild(img);
这是 last.fm 返回的 json:
{"recenttracks":{"track":[{"artist":{"#text":"Jason Mraz","mbid":"82eb8936-7bf6-4577-8320-a2639465206d"},"name":"I Won't Give Up","streamable":"0","mbid":"7a49cb65-1f22-4334-b139-6500c2e79ee5","album":{"#text":"I Won't Give Up","mbid":"6e680b82-fa31-4342-87b6-1c306d4fb90c"},"url":"https://www.last.fm/music/Jason+Mraz/_/I+Won%27t+Give+Up","image":[{"#text":"https://lastfm-img2.akamaized.net/i/u/34s/6288819e941d491584fa6fa66b8e903f.png","size":"small"},{"#text":"https://lastfm-img2.akamaized.net/i/u/64s/6288819e941d491584fa6fa66b8e903f.png","size":"medium"},{"#text":"https://lastfm-img2.akamaized.net/i/u/174s/6288819e941d491584fa6fa66b8e903f.png","size":"large"},{"#text":"https://lastfm-img2.akamaized.net/i/u/300x300/6288819e941d491584fa6fa66b8e903f.png","size":"extralarge"}],"date":{"uts":"1517936832","#text":"06 Feb 2018, 17:07"}}],"@attr":{"user":"PlGGS","page":"1","perPage":"1","totalPages":"103","total":"103"}}}
有谁知道如何具体获取相册的 'extralarge' 图片 url?
仅设置一次 src get
returns:
在这个例子中,我没有调用 API,因为我没有 API 键。
我的 setTimeout
函数模拟异步 API 调用。
直到 API returns。
之前,我也不会创建图像或设置其 src
// I don't have an API KEY so this is commented out
/*
$.get("https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=plggs&api_key=MY_API_KEY&limit=1&format=json",
function (data, status) {
var img = new Image();
img.setAttribute("class", "album-img");
img.setAttribute("alt", "album");
document.getElementById("album-art-div").appendChild(img);
img.setAttribute("src", data.recenttracks.track[0].image[2]['#text']);
}
);
*/
// This code emulates the API call.
setTimeout(
function() {
var data = {"recenttracks":{"track":[{"artist":{"#text":"Jason Mraz","mbid":"82eb8936-7bf6-4577-8320-a2639465206d"},"name":"I Won't Give Up","streamable":"0","mbid":"7a49cb65-1f22-4334-b139-6500c2e79ee5","album":{"#text":"I Won't Give Up","mbid":"6e680b82-fa31-4342-87b6-1c306d4fb90c"},"url":"https://www.last.fm/music/Jason+Mraz/_/I+Won%27t+Give+Up","image":[{"#text":"https://lastfm-img2.akamaized.net/i/u/34s/6288819e941d491584fa6fa66b8e903f.png","size":"small"},{"#text":"https://lastfm-img2.akamaized.net/i/u/64s/6288819e941d491584fa6fa66b8e903f.png","size":"medium"},{"#text":"https://lastfm-img2.akamaized.net/i/u/174s/6288819e941d491584fa6fa66b8e903f.png","size":"large"},{"#text":"https://lastfm-img2.akamaized.net/i/u/300x300/6288819e941d491584fa6fa66b8e903f.png","size":"extralarge"}],"date":{"uts":"1517936832","#text":"06 Feb 2018, 17:07"}}],"@attr":{"user":"PlGGS","page":"1","perPage":"1","totalPages":"103","total":"103"}}};
var img = new Image();
img.setAttribute("class", "album-img");
img.setAttribute("alt", "album");
document.getElementById("album-art-div").appendChild(img);
img.setAttribute("src", data.recenttracks.track[0].image[2]['#text']);
},500
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="album-art-div"></div>
我正在尝试使用 last.fm 的 spotify scrobble api 将 url 设为我最近播放的歌曲的专辑图片。我能够获取歌曲名称和艺术家,但歌曲专辑图片的 link 文本返回 "object%20Object" 或 "object Object"。
var img = new Image();
img.setAttribute("src", $.get("https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=plggs&api_key=MY_API_KEY&limit=1&format=json", function (data, status) {
$("#album-art").html(data["recenttracks"]["track"][0]["image"][2]['#text']);
}));
img.setAttribute("class", "album-img");
img.setAttribute("alt", "album");
document.getElementById("album-art-div").appendChild(img);
这是 last.fm 返回的 json:
{"recenttracks":{"track":[{"artist":{"#text":"Jason Mraz","mbid":"82eb8936-7bf6-4577-8320-a2639465206d"},"name":"I Won't Give Up","streamable":"0","mbid":"7a49cb65-1f22-4334-b139-6500c2e79ee5","album":{"#text":"I Won't Give Up","mbid":"6e680b82-fa31-4342-87b6-1c306d4fb90c"},"url":"https://www.last.fm/music/Jason+Mraz/_/I+Won%27t+Give+Up","image":[{"#text":"https://lastfm-img2.akamaized.net/i/u/34s/6288819e941d491584fa6fa66b8e903f.png","size":"small"},{"#text":"https://lastfm-img2.akamaized.net/i/u/64s/6288819e941d491584fa6fa66b8e903f.png","size":"medium"},{"#text":"https://lastfm-img2.akamaized.net/i/u/174s/6288819e941d491584fa6fa66b8e903f.png","size":"large"},{"#text":"https://lastfm-img2.akamaized.net/i/u/300x300/6288819e941d491584fa6fa66b8e903f.png","size":"extralarge"}],"date":{"uts":"1517936832","#text":"06 Feb 2018, 17:07"}}],"@attr":{"user":"PlGGS","page":"1","perPage":"1","totalPages":"103","total":"103"}}}
有谁知道如何具体获取相册的 'extralarge' 图片 url?
仅设置一次 src get
returns:
在这个例子中,我没有调用 API,因为我没有 API 键。
我的 setTimeout
函数模拟异步 API 调用。
直到 API returns。
之前,我也不会创建图像或设置其src
// I don't have an API KEY so this is commented out
/*
$.get("https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=plggs&api_key=MY_API_KEY&limit=1&format=json",
function (data, status) {
var img = new Image();
img.setAttribute("class", "album-img");
img.setAttribute("alt", "album");
document.getElementById("album-art-div").appendChild(img);
img.setAttribute("src", data.recenttracks.track[0].image[2]['#text']);
}
);
*/
// This code emulates the API call.
setTimeout(
function() {
var data = {"recenttracks":{"track":[{"artist":{"#text":"Jason Mraz","mbid":"82eb8936-7bf6-4577-8320-a2639465206d"},"name":"I Won't Give Up","streamable":"0","mbid":"7a49cb65-1f22-4334-b139-6500c2e79ee5","album":{"#text":"I Won't Give Up","mbid":"6e680b82-fa31-4342-87b6-1c306d4fb90c"},"url":"https://www.last.fm/music/Jason+Mraz/_/I+Won%27t+Give+Up","image":[{"#text":"https://lastfm-img2.akamaized.net/i/u/34s/6288819e941d491584fa6fa66b8e903f.png","size":"small"},{"#text":"https://lastfm-img2.akamaized.net/i/u/64s/6288819e941d491584fa6fa66b8e903f.png","size":"medium"},{"#text":"https://lastfm-img2.akamaized.net/i/u/174s/6288819e941d491584fa6fa66b8e903f.png","size":"large"},{"#text":"https://lastfm-img2.akamaized.net/i/u/300x300/6288819e941d491584fa6fa66b8e903f.png","size":"extralarge"}],"date":{"uts":"1517936832","#text":"06 Feb 2018, 17:07"}}],"@attr":{"user":"PlGGS","page":"1","perPage":"1","totalPages":"103","total":"103"}}};
var img = new Image();
img.setAttribute("class", "album-img");
img.setAttribute("alt", "album");
document.getElementById("album-art-div").appendChild(img);
img.setAttribute("src", data.recenttracks.track[0].image[2]['#text']);
},500
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="album-art-div"></div>