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

Question

[Илья]

Есть массив со ссылками на страницы. Каждая ссылка относится к категории, например 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>

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

Можно и не выводить данные, просто логировать. Потом всё равно перенесу в Реакт.

Answer 1

[0xD34F]

Сначала группируете данные:

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

Потом можно html собрать:

document.body.insertAdjacentHTML('beforeend', grouped
  .map(([ k, v ]) => `<div>${k}</div>${v.map(n => `<div>${n}</div>`).join('')}`)
  .join('')
);

Или создать элементы напрямую:

document.body.append(...grouped.flat(2).map(n => {
  const div = document.createElement('div');
  div.innerText = n;
  return div;
}));

Comments

[hzzzzl]

а как называется эта штука, где выражения через запятую выполняются? никогда такого не видел, хак какой то?

result = (a = [].push(3), console.log(234), 4)

// result = 4

[0xD34F]

hzzzzl, да так и называется - запятая.

[Stockholm Syndrome]

hzzzzl, https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Илья]

0xD34F, будет норм по скорости, если в массиве много ссылок и разных полей, помимо title?

Answer 2

[Stockholm Syndrome]

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);
  });
});