無法顯示來自音樂 API 的 JSON 數據

Question

我無法使用 LastFM api 顯示搜索到的藝術家的熱門曲目以獲取數據。 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);


})

Answer 1

您的輸入 JSON 無效。 您需要正確格式化它。 一旦數據正確：

createHTML.push(response.toptracks.track[0])

or

let i = 0;
for(; i < response.toptracks.track.length; i++){
 createHTML.push(response.toptracks.track[i]);
}

Answer 2

我注意到您還沒有解析響應：

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)

我希望這可以幫助你:)