@sidorchik

Как вывести массив ссылок, добавив заголовки?

Есть массив со ссылками на страницы. Каждая ссылка относится к категории, например Cats.
const list = [
	{
		title: 'Link 1',
		part: 'Cats'
	},
	{
		title: 'Link 2',
		part: 'Cats'
	},
	{
		title: 'Link 3',
		part: 'Dogs'
	},
	{
		title: 'Link 4',
		part: 'Dogs'
	}
];

Как вывести ссылки с написанными перед ними заголовками категорий? Нужно, чтобы категория выводилась один раз.
<div>Cats</div>
<div>Link 1</div>
<div>Link 2</div>
<div>Dogs</div>
<div>Link 3</div>
<div>Link 4</div>

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

Можно и не выводить данные, просто логировать. Потом всё равно перенесу в Реакт.
  • Вопрос задан
  • 120 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
Сначала группируете данные:

const grouped = list.reduce((acc, n) => (
  (acc[n.part] = acc[n.part] || []).push(n.title),
  acc
), {});

А потом можно и html собрать:

const html = Object
  .entries(grouped)
  .map(([ k, v ]) => `<div>${k}</div>${v.map(n => `<div>${n}</div>`).join('')}`)
  .join('');
Ответ написан
@StockholmSyndrome
const data = list.reduce((acc, {title, part}) => {
  acc[part] = acc[part] || [];
  acc[part].push(title); 
  return acc;
}, {});


Object.entries(data).forEach(([part, titles]) => {
  [part, ...titles].forEach((item) => {
    const div = document.createElement('div'); 
    div.textContent = item; 
    document.body.appendChild(div);
  });
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 17:14
4000 руб./за проект
29 мар. 2024, в 17:04
5000 руб./за проект
29 мар. 2024, в 17:03
3000 руб./за проект