I'm currently in the process of developing a Spotify application. Upon executing a GET query for a track search, I aim to showcase the results as interactive buttons featuring the track name and artist. As the query can yield varying numbers of outcomes, how can I dynamically insert and remove these buttons? The search findings are in JSON format.
Implementation: Bootstrap, HTML, and 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");
})
This code showcases the search findings structured in a similar manner to the example below.
{
"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"]
}