Как создать строки и столбцы в jQuery после извлечения данных из списка точек обмена

Question

Я создал аккордеон в JavaScript, который содержит 7 категорий, я также извлекаю данные из списка Share Point и фильтрую элементы по категориям.После фильтрации элементов по категориям и добавления их к соответствующей панели категорий я хочу создать 4 столбца и все необходимые строки с элементами, выбранными из списка.Требуемый конечный результат прикреплен.

Требуемый конечный результат прикреплен. Аккордеон Желаемый результат

$(document).ready(function () {
  $.ajax({
    url: "http://bc-net/_api/web/lists/GetByTitle('specialDiscounts')/items",
    method: 'GET',
    headers: {
      'Accept': 'application/json; odata=verbose'
    },
    success: function (data) {
      var items = data.d.results;
      console.log(items);

       var auto = $('#automotive');
       var entertainment = $('#entertainment');
       var healthBeauty = $('#healthBeauty');
       var travel = $('#travel');
       var electronics= $('#electronics');
       var services= $('#services');
       var housing= $('#housing');


      for (var j = 0; j < items.length; j++) {

       var panelsContent ='<div class="row animated fadeInUp">' +
                        '<div class="col-md-4">' +
                        '<div class="card-body card-body-cascade text-center">' +
                        '<a href=" ' + items[j].Link.Url + '" target = _blank> <h4 class="card-title my-4"><strong>' + items[j].Title +
                        '</strong></h4></a><p class="card-text">' + items[j].Description + '</p>'                   



        // branching logic,
        // append the <p> in different places based on
        // different possible Category values

        switch (items[j].Category) {
            case 'Automotive':
                auto.append(panelsContent);
                break;
            case 'Entertainment':
                entertainment.append(panelsContent);
                break;
            case 'Health and Beauty':
                healthBeauty.append(panelsContent);
                break;
             case 'Travel':
                travel.append(panelsContent);
                break;
             case 'Electronics':
                electronics.append(panelsContent);
                break;
            case 'Services':
                services.append(panelsContent);
                break;
             case 'Housing':
                housing.append(panelsContent);
                break;
         default:
                break;
                }
    }

      },
    error: function (data) {
      alert('Error: ' + data);
    }
  }) // End Service Icons  //End Service Icons
}) // End ready function 

Это фрагмент HTML

<div id="housing" class="accordion-content list-reset leading-normal px-8 py-4 hidden">
<!--Services Content Injected--> 
</div>

Это то, что я получаю Это то, что я получаю

Результаты консоли

Answer 1

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

$(document).ready(function () {
$.ajax({
    url: "http://bc-net/_api/web/lists/GetByTitle('specialDiscounts')/items",
    method: 'GET',
    headers: {
        'Accept': 'application/json; odata=verbose'
    },
    success: function (data) {
        var items = data.d.results;
        console.log(items);

        var auto = $('#automotive');
        var entertainment = $('#entertainment');
        var healthBeauty = $('#healthBeauty');
        var travel = $('#travel');
        var electronics = $('#electronics');
        var services = $('#services');
        var housing = $('#housing');

        var autoContent = $('<div class="row animated fadeInUp"></div>');
        var entertainmentContent = $('<div class="row animated fadeInUp"></div>');
        var healthBeautyContent = $('<div class="row animated fadeInUp"></div>');
        var travelContent = $('<div class="row animated fadeInUp"></div>');
        var electronicsContent = $('<div class="row animated fadeInUp"></div>');
        var servicesContent = $('<div class="row animated fadeInUp"></div>');
        var housingContent = $('<div class="row animated fadeInUp"></div>');


        var itemContent;
        for (var j = 0; j < items.length; j++) {

            itemContent = '<div class="col-md-3">' +
                '<div class="card-body card-body-cascade text-center">' +
                '<a href=" ' + items[j].Link.Url + '" target = _blank> <h4 class="card-title my-4"><strong>' + items[j].Title +
                '</strong></h4></a><p class="card-text">' + items[j].Description + '</p></div></div>';

            // branching logic,
            // append the <p> in different places based on
            // different possible Category values

            switch (items[j].Category) {
                case 'Automotive':
                    autoContent.append(itemContent);
                    break;
                case 'Entertainment':
                    entertainmentContent.append(itemContent);
                    break;
                case 'Health and Beauty':
                    healthBeautyContent.append(itemContent);
                    break;
                case 'Travel':
                    travelContent.append(itemContent);
                    break;
                case 'Electronics':
                    electronicsContent.append(itemContent);
                    break;
                case 'Services':
                    servicesContent.append(itemContent);
                    break;
                case 'Housing':
                    housingContent.append(itemContent);
                    break;
                default:
                    break;
            }
        }

        auto.append(autoContent);
        entertainment.append(entertainmentContent);
        healthBeauty.append(healthBeautyContent);
        travel.append(travelContent);
        electronics.append(electronicsContent);
        services.append(servicesContent);
        housing.append(housingContent);

    },
    error: function (data) {
        alert('Error: ' + data);
    }
}); // End Service Icons  //End Service Icons
}); // End ready function