Стилизация семантических элементов пользовательского интерфейса в функции успеха JQuery AJAX

Question

Я довольно плохо знаком с пользовательским интерфейсом, стилями и т. Д., Но я пытаюсь создать динамический набор карт семантического пользовательского интерфейса в функции успеха Ajax, и стилизация элементов, похоже, не работает. Я могу получить данные JSON из службы REST просто отлично, и эти данные отображаются на моей странице, как и ожидалось, просто элементы интерфейса не стилизуются. Другие элементы Semantic UI на странице оформлены отлично - это просто те, которые находятся внутри блока.

У меня есть тег <div>, в который я хочу вставить карточки на страницу, например:

<div class="schedule-data"></div>

Вот код JQuery AJAX, который у меня сейчас есть:

$(document).ready(function() {
    $.ajax({
        type: 'GET',
        dataType: "json",
        url: "http://localhost:3001/schedule",
        success: function(data) {
            $('.schedule-data').append(`<div class="ui link cards">`);
            data.map(item => {

                // Inject card markup for each schedule item here

            });
            $('.schedule-data').append(`</div>`);
        },
        error: function(error) {
            console.log(JSON.stringify(error));
            alert('Error!');
        }
    })
});

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

<div class="ui card">
   <div class="image">
      <img src="myimage.jpg">
   </div>
   <div class="content">
      <a class="header">Schedule Title</a>
      <div class="meta">
         <span class="date">Schedule Platform</span>
      </div>
      <div class="description">
         Schedule Description
      </div>
   </div>
   <div class="extra content">
      Schedule Date
   </div>
   <div class="extra content">
      <span class="left floated like"><i class="like icon"></i>Like</span>
      <span class="right floated star"><i class="star icon"></i>Favorite</span>
   </div>
</div>

Я пробовал нечто похожее на приведенное ниже внутри функции map() функции success() (не точное представление HTML выше, но должно иллюстрировать подход), но это не работает

$('.schedule-data')
    .append(`<div class="ui card">`)
    .append(`<div class="image">`)
    .append(`<img src='${item.image}'>`)
    .append(`</div>`)
    .append(`<div class="content">`)
    .append(`<div class="header">${item.title}</div>`)
    .append(`<div class="meta">`)
    .append(`<a>${item.platform}</a>`)
    .append(`</div>`)
    .append(`<div class="description">`)
    .append(`${item.description}`)
    .append(`</div>`)
    .append(`</div>`)
    .append(`<div class="extra content">`)
    .append(`${item.date}`)
    .append(`</div>`)
    .append(`</div>`);
});

Использую ли я здесь соответствующий подход, и почему элементы не стилизуются? Есть ли лучший способ сделать это?

Answer 1

Если у вас есть элементы или массив таких элементов (это будет работать в зависимости от структуры структурированных данных JSON):

var myData = {
    'image': 'myImage',
    'title': 'This is the title',
    'platform': 'Some platform',
    'description': 'The description',
    'date': '2018-5-14'
}

Вы можете создать функцию для замены свойств переменной и затем выполнить операцию append():

function fillData(item) {
    return `<div class='ui card'>
    <div class='image'>
       <img src='${item.image}'>
    </div>
    <div class='content'>
       <a class='header'>${item.title}</a>
       <div class='meta'>
          <span class='date'> <a> ${item.platform} </a> </span>
       </div>
       <div class='description'>
         ${item.description}
       </div>
    </div>
    <div class='extra content'>
         ${item.date}
    </div>
    <div class='extra content'>
       <span class='left floated like'><i class='like icon'></i>Like</span>
       <span class='right floated star'><i class='star icon'></i>Favorite</span>
    </div>
 </div>`
}

Тогда внутри success() метода:

let $scheduledata = $('.schedule-data');
$scheduledata.append(`<div class="ui link cards"></div>`);
let $cards = $scheduledata.find('.ui.link.cards')
let newelemarray = data.map(item => fillData(item));
for(let i = 0; i < newelemarray.length; i++){
    $cards.append(newelemarray[i]);
}