[英]Trouble displaying JSON data from music api
I am having trouble to display the top tracks of a searched artist using the LastFM api to get data.我无法使用 LastFM api 显示搜索到的艺术家的热门曲目以获取数据。 The api returns an object toptracks.
api 返回一个对象 toptracks。 I would like to grab details about each of the top tracks from that api data.
我想从该 api 数据中获取有关每个热门曲目的详细信息。
I am not sure if I am on the right track.我不确定我是否在正确的轨道上。 Can someone take a look and let me know if I am doing something wrong?
如果我做错了什么,有人可以看看并告诉我吗?
Sample data from 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);
})
Your input JSON is not valid.您的输入 JSON 无效。 You'll need to format it correctly.
您需要正确格式化它。 Once the data is correct:
一旦数据正确:
createHTML.push(response.toptracks.track[0])
or
let i = 0;
for(; i < response.toptracks.track.length; i++){
createHTML.push(response.toptracks.track[i]);
}
I've notice that you have not parsed the response:我注意到您还没有解析响应:
axios.get(url + urlEncodedSearchString).then(function(response) {
var parsed = JSON.parse(response);
$(".tracks-container").innerHTML = renderTracks(parsed.toptracks.track)
});
Another correction that I can suggest is to change the track.artist[0]
to track.artist["name"]
once this property returns an object instead of an array.我可以建议的另一个更正是将
track.artist[0]
更改为track.artist["name"]
一旦此属性返回一个对象而不是数组。 And about this: <h3>${toptracks[1].rank}</h3>
.关于这个:
<h3>${toptracks[1].rank}</h3>
。 You will be not able to access that property because at your function you are providing just the track
property.您将无法访问该属性,因为在您的函数中,您只提供了
track
属性。 In this case you have two options: provide the whole response array or add a new parameter providing this.在这种情况下,您有两个选择:提供整个响应数组或添加一个新参数来提供它。
function renderTracks(trackArray) {/**...*/};
//...
$(".tracks-container").innerHTML = renderTracks(parsed.toptracks)
Or或者
function renderTracks(trackArray, toptracks) {/**...*/};
//...
$(".tracks-container").innerHTML = renderTracks(parsed.toptracks.track, parsed.toptracks)
I hope this can help you :)我希望这可以帮助你:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.