Как можно сформировать дерево категорий в javascript?

Question

[Дмитрий]

Каким образом можно создать древовидный вывод в html подкатегорий?
формат, который мне приходит, обычный для таких ситуаций:

{id: 1, name: "Категория 1", parent_id: 0}
{id: 2, name: "Категория 2", parent_id: 0}
{id: 3, name: "Категория 3", parent_id: 1}

Я так понимаю лучше всего это сделать через рекурсии?

Comments

[Пашенька]

На нечто похожее когда-то отвечал тык пык.
Но можно и рекурсией, если глубина неизвестна.

Answer 1

[0xD34F]

Сделаем метод, который превратит плоский массив во вложенный:

function createTreeData(arr, idProp, parentProp) {
  const tree = Object.fromEntries(arr.map(n => [ n[idProp], { ...n, children: [] } ]));
  return Object.values(tree).filter(n => !tree[n[parentProp]]?.children.push(n));
}

Сделаем метод, который создаст разметку дерева из вложенного массива:

const createTreeHTML = data =>
  Array.isArray(data) && data.length
    ? `<ul>${data.map(n => `
         <li>
           ${n.name}
           ${createTreeHTML(n.children)}
         </li>`).join('')}
       </ul>`
    : '';

Всё, можно строить дерево:

const treeData = createTreeData(data, 'id', 'parent_id');
const treeHTML = createTreeHTML(treeData);
treeContainerElement.innerHTML = treeHTML;

https://jsfiddle.net/1yxz5a2k/

Answer 2

[Евгений Кузнецов]

можно без рекурсии, в принципе: https://jsfiddle.net/y1ehn4v6/
просто через поиск по DOM