@jeka-3

Как загружать на страницу посты с одинаковым id?

Как загружать на страницу посты с одинаковым id по клике на кнопку: сначала должны быть видны посты с id 1, кликнули, id 1, id 2; ещё раз кликнули id 1, id 2, id 3.
Html:
<div class="container">
    <div style="margin: 20px 0">
        <button id="btn">Get post</button>
    </div>
    <div class="card__wrap">

    </div>    
</div>

JS:
let data = [
  {
    "id": 1,
    "name": "Пост 1"
  },
  {
    "id": 1,
    "name": "Пост 2"
  },
  {
    "id": 2,
    "name": "Пост 3"
  },
  {
    "id": 1,
    "name": "Пост 4"
  },
  {
    "id": 3,
    "name": "Пост 5"
  },
  {
    "id": 2,
    "name": "Пост 6"
  }, 
  {
    "id": 3,
    "name": "Пост 7"
  },
]

data.forEach(({ id, name }) => {
  users[`${name}`] = { id, name };
  list.innerHTML += `
    <li class="user-item">${name} | ${id}</li>  `
})

Финальный результат должен быть вот такой:
<div class="card__wrap">
  <ul id="1">
    <li>Пост 1</li>
    <li>Пост 2</li>
    <li>Пост 4</li>
  </ul>
  <ul id="2">
    <li>Пост 3</li>
    <li>Пост 6</li>
  </ul>
  <ul id="3">
    <li>Пост 7</li>
  </ul>
</div>
  • Вопрос задан
  • 108 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
const grouped = Object.values(data.reduce((acc, n) => ((acc[n.id] ||= []).push(n), acc), {}));

document.querySelector('button').addEventListener('click', function() {
  const html = `<ul>${grouped.shift().map(n => `<li>${n.name}</li>`).join('')}</ul>`;
  document.querySelector('.card__wrap').insertAdjacentHTML('beforeend', html);

  this.disabled = !grouped.length;
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
27 янв. 2021, в 00:37
11111 руб./за проект
26 янв. 2021, в 23:30
3000 руб./за проект
26 янв. 2021, в 23:07
1000 руб./за проект