从音乐api显示JSON数据时出现问题
从音乐api显示JSON数据时出现问题
提问于 2019-06-27 07:36:21
使用LastFM应用程序接口获取数据时，我无法显示搜索到的艺术家的顶级曲目。该api返回一个对象toptracks。我想从api数据中获取每个顶级曲目的详细信息。
我不确定我是否在正确的轨道上。如果我做错了什么，能不能有人看一下，让我知道？
来自api的示例数据：
{
"toptracks": {
"track": [{
"name": "Best I Ever Had",
"playcount": "3723918",
"listeners": "1086968",
"mbid": "00bde944-7562-446f-ad0f-3d4bdc86b69f",
"url": "https://www.last.fm/music/Drake/_/Best+I+Ever+Had",
"streamable": "0",
"artist": {
"name": "Drake",
"mbid": "b49b81cc-d5b7-4bdd-aadb-385df8de69a6",
},
"@attr": {
"rank": "1"
}
},
{
"name": "Forever",
"playcount": "1713492",
"listeners": "668998",
"url": "https://www.last.fm/music/Drake/_/Forever",
"streamable": "0",
"artist": {
"name": "Drake",
"mbid": "b49b81cc-d5b7-4bdd-aadb-385df8de69a6",
},
"@attr": {
"rank": "2"
}
}
}function renderTracks(trackArray) {
function createHTML(track){
return `<h1>${track.name}</h1>
<h2>${track.artist[0]}</h2>
<h3>${toptracks[1].rank}</h3>
<h3>${track.playcount}</h3>`;
};
trackHTML = trackArray.map(createHTML);
return trackHTML.join("");
};
var searchString = $(".search-bar").val().toLowerCase();
var urlEncodedSearchString = encodeURIComponent(searchString);
const url = "lastFMwebsite"
axios.get(url + urlEncodedSearchString).then(function(response) {
// createHTML.push(response.data.track);
// $(".tracks-container").innerHTML = renderTracks(response.data.track);
// comented out old code above
createHTML.push(response.toptracks.track);
$(".tracks-container").innerHTML = renderTracks(response.toptracks.track);
})回答 2
Stack Overflow用户
回答已采纳
发布于 2019-06-27 21:58:12
我注意到您还没有解析响应：
axios.get(url + urlEncodedSearchString).then(function(response) {
var parsed = JSON.parse(response);
$(".tracks-container").innerHTML = renderTracks(parsed.toptracks.track)
});我可以建议的另一个更正是，一旦此属性返回对象而不是数组，就将track.artist[0]更改为track.artist["name"]。关于这个：<h3>${toptracks[1].rank}</h3>。您将无法访问该属性，因为在您的函数中只提供了track属性。在这种情况下，您有两个选择:提供整个响应数组或添加一个新参数。
function renderTracks(trackArray) {/**...*/};
//...
$(".tracks-container").innerHTML = renderTracks(parsed.toptracks)或
function renderTracks(trackArray, toptracks) {/**...*/};
//...
$(".tracks-container").innerHTML = renderTracks(parsed.toptracks.track, parsed.toptracks)我希望这能帮助你:)
Stack Overflow用户
发布于 2019-06-27 07:44:09
您的输入JSON无效。你需要正确地格式化它。一旦数据正确：
createHTML.push(response.toptracks.track[0])
or
let i = 0;
for(; i < response.toptracks.track.length; i++){
createHTML.push(response.toptracks.track[i]);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56782175
复制相关文章
相似问题