Создание динамического бутстрапа 4 Аккордеон с данными от вызова Ajax

Will спросил: 03 февраля 2018 в 11:38 в: jquery

Я пытаюсь создать Аккордеон Bootstrap 4. Я использую вызов Ajax для получения данных, и данные правильно регистрируются на консоли. Я хотел бы сделать цикл ForEach и добавить новую карту в Accordion для каждого альбома, возвращенного в наборе данных JSONP.

Проблема, с которой я сталкиваюсь: сначала загружается HTML, затем я получаю данные, а затем после этого ничего не происходит, аккордеон не отображает.

Как загрузить аккордеон после того, как все данные готовы?

Соответствующий HTML (идентификатор исполнителя является целым числом ):

<div id="discogAccordion">                          <script type="text/javascript">
      let url = 'https://api.deezer.com/artist/' + {{ artist_id }} +'/albums?output=jsonp';
  </script>  <script type="text/javascript" src="{% static "js/tracklist.js" %}">
  </script>
</div>

Релевантный JS (js / tracklist.js):

$(function () {
$.ajax({
    url: url,
    type: 'GET',
    jsonp: 'callback',
    dataType: 'jsonp',
    crossDomain: true,
    success: function (data) {
        console.log('all data: ', data);
        albumAccordion(data);
    },
    error: function (x, y, z) {
        console.log('x', x);
        console.log('y', y);
        console.log('z', z);
    }
});
});let albumAccordion = function (data) {
    data.data.forEach(function (item, index) {
    console.log(item, index);
    return $('.discogAccordion').append(        '<div class="card">'+
            '<div class="card-header" id="heading'+ index +'">'+
                '<h5 class="mb-0">'+
                    '<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse'+ index +'"'+
                            ' aria-expanded="false" aria-controls="collapse'+ index +'">'+
                        'enim eiusmod high life accusamus terry '+
                    '</button>'+
                '</h5>'+
            '</div>'+            '<div id="collapse'+ index +'" class="collapse" aria-labelledby="heading'+ index +'" data-parent="#discogAccordion">'+
                '<div class="card-body">'+
                    'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf'+
                '</div>'+
            '</div>'+
        '</div>'
    );
});
};

0 ответов