Question

我正在创建Spotify应用。在对轨道搜索进行GET查询后，我想将结果显示为具有轨道名称和艺术家的可点击按钮。查询返回不同数量的结果。如何动态添加和删除按钮？我将搜索结果作为JSON。

使用Bootstrap，HTML和JavaScript

function searchSpotify(track) {
    $.post(URL + "/search", { "pc": getCookie('pc'), "track": track }, function (data, status) {
    console.log("Searching for: " + track)
    if (status === "success") {
        console.log("Results found: " + data)                    
        document.getElementById('textSpace').innerHTML = data
        localStorage.setItem('searchResults', JSON.stringify(data));
    }
})
.fail(function (response, status) {
    console.log("No results found");
})

在此代码中，数据是搜索结果，格式如下。

{
    "artists":["Calvin Harris","Morgan Evans","Prince","Lil Peep","Ed Sheeran","Carly Rae Jepsen","Sixpence None The Richer","Soulja Boy","Calvin Harris","Chris Brown"],
    "names":["One Kiss (with Dua Lipa)","Kiss Somebody","Kiss","Kiss","Kiss Me","Call Me Maybe","Kiss Me","Kiss Me Thru The Phone","One Kiss (with Dua Lipa) - ZHU Remix","Kiss Kiss"],
    "ids":["7ef4DlsgrMEH11cDZd32M6","1mJMD1VIQ7jWTP9DK2zmY0","62LJFaYihsdVrrkgUOJC05","4J3FltfCktHfD9iPCneDGy","0Tel1fmuCxEFV6wBLXsEdk","3TGRqZ0a2l1LRblBkJoaDx","754kgU5rWscRTfvlsuEwFp","2q4rjDy9WhaN3o9MvDbO21","3aNt9AQw0JSY9dvCiPK1kF","4CweuuMMzi71pO0MSRgyaT"]
}

Answer 1

＆＃13;

 
    (function dotDone() {
        var data = {
            "artists": ["Calvin Harris", "Morgan Evans", "Prince", "Lil Peep", "Ed Sheeran", "Carly Rae Jepsen", "Sixpence None The Richer", "Soulja Boy", "Calvin Harris", "Chris Brown"],
            "names": ["One Kiss (with Dua Lipa)", "Kiss Somebody", "Kiss", "Kiss", "Kiss Me", "Call Me Maybe", "Kiss Me", "Kiss Me Thru The Phone", "One Kiss (with Dua Lipa) - ZHU Remix", "Kiss Kiss"],
            "ids": ["7ef4DlsgrMEH11cDZd32M6", "1mJMD1VIQ7jWTP9DK2zmY0", "62LJFaYihsdVrrkgUOJC05", "4J3FltfCktHfD9iPCneDGy", "0Tel1fmuCxEFV6wBLXsEdk", "3TGRqZ0a2l1LRblBkJoaDx", "754kgU5rWscRTfvlsuEwFp", "2q4rjDy9WhaN3o9MvDbO21", "3aNt9AQw0JSY9dvCiPK1kF", "4CweuuMMzi71pO0MSRgyaT"]
        }
        let sHTML = "";
        for(let i = 0; i < data.artists.length; i++){
            sHTML += '<button type="button" class="btn btn - primary">artists: ' + data.artists[i] 
                + ' song: ' + data.names + '</button>';
        }

        $('#theButtons').html(sHTML);
    })();

＆＃13;

<!DOCTYPE HTML>
<html>

<body>

<div id="theButtons">
</div>

</body>

</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

所以你应该能够像.dail一样将它作为.done添加到你的函数中。 jQuery遍历数据对象并生成html，然后通过以下方式发布：$（＆＃39;＃theButtons＆＃39;）。html（sHTML）;到了

用于显示搜索结果的Bootstrap列表？

1 个答案: