Список начальной загрузки для отображения результатов поиска? - PullRequest
Новая
       2

Список начальной загрузки для отображения результатов поиска?

0 голосов
/ 06 июня 2018

Я создаю приложение 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"]
}

1 Ответ

0 голосов
/ 06 июня 2018 

 
    (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);
    })();
<!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>

Таким образом, вы сможете добавить это к своим функциям как .done, точно так же, как .fail уже был сделан.jQuery просматривает объект данных и генерирует html, который затем публикуется: $ ('# theButtons'). html (sHTML);к

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...