Как построить список на основе сгруппированных и уникализированных данных?

Question

[rshruslan]

Есть массив:

let array = [
  {
    category: 'Animals',
    type: 'something'
  },
  {
    category:'Animals',
    type: 'some'
  },
  {
    category: 'Animals',
    type: 'something'
  },
  {
    category: 'Human',
    type: 'some'
  },
  {
    category: 'Human',
    type: 'some2'
  },
  {
    category: 'Human',
    type: 'some2'
  }
]

Из него надо получить следующее:

Animals
--something
--some
Human
--some
--some2

Answer 1

[0xD34F]

Группируем и уникализируем данные:

const groupedAndUnique = Object.entries(arr.reduce((acc, n) => {
  (acc[n.category] = acc[n.category] ?? new Set).add(n.type);
  return acc;
}, {}));

Затем собираем html:

document.body.insertAdjacentHTML('beforeend', `
  <ul>${groupedAndUnique.map(([ k, v ]) => `
    <li>
      ${k}
      <ul>${Array.from(v, n => `
        <li>${n}</li>`).join('')}
      </ul>
    </li>`).join('')}
  </ul>`
);

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

const ul = document.createElement('ul');

ul.append(...groupedAndUnique.map(([ header, items ]) => {
  const li = document.createElement('li');
  li.append(header, document.createElement('ul'));

  for (const n of items) {
    li.lastChild.append(document.createElement('li'));
    li.lastChild.lastChild.textContent = n;
  }

  return li;
}));

document.body.append(ul);

Comments

[rshruslan]

Спасибо, чуть позже проверю

[rshruslan]

Полностью работает, понял в чем у меня была ошибка, спасибо вам, а то у меня выводился только 1 категория и 1 тип, а мне просто надо переделать в рабочем варианте для человека