3

https:news.investforum.ru/feed/filter/full/?&channels=satellits Есть json с новостями, там массив из 20 обьектов, В каждом заголовок,предесловие(сокрашенный текст),изображение к статье,и сама статья. Я его вывел сделал небольшой темплейт. В каждом темемплейте есть кнопка лерн мор , по клику кнопки нужно открыть полностью статью или в новой странице или в этой + там есть поле для коментариев , как это сделать? Пмогите пажалуйста.

$.getJSON(my_url, function(data) {

    for ( i in data ) {
        var newsbox = $("<div>", {class: 'news-item'}),
            link = $( "<a>", { class: "news-item-btn", text: 'Learn more', id: "" + i}),
            infobox = $("<div>", {class: "news-item-info"});

        $(document).find('.blog').append(newsbox)
            newsbox.append('<div class="news-item-img"><img src=' + data[i].Image + ">");
            infobox.append("<h3>" + data[i].Title);
            infobox.append("<div>" + data[i].Description);
            infobox.append(link);
            newsbox.append(infobox);
    }
})      

1 ответ 1

2

Можно сделать так, сначала создаем нужный нам DOM-узел, a потом один раз выводим его на стнаницу. Так будет работать быстрее, чем по очереди выводить каждый элемент.

P.S Пример рабочий, можете его запустить

// Фейковое API для примера
const url = 'https://jsonplaceholder.typicode.com/users';

$.getJSON(url, data => {
  // Создаем все нужные нам компоненты
  const $ul = $('<ul class="list" />');
  const $li = $('<li class="list-item" />');

  // Метод .map() вернет нам новый массив из компонентов li
  const list = data.map(user => {
    // клонируем нужные нам компонетны
    const item = $li.clone();
    // Добавляем нужные значения
    item.text(user.name);
    // Возвращаем
    return item;
  });

  // Добавляем массив из li в ul
  $ul.append(list);
  // У нас теперь есть готовый список который хранится в памяти JS,
  // осталось его отобразить
  
  // Выводим готовый DOM-узел на страницу
  $('#app').append($ul);
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="app"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.