Михаил Матвеев

Использовать перебор и делегирование.

Я думаю вам бы быстрее ответили, если бы вы скинули именно ту часть кода с которой требуется помощь.
Мое решение такое, думаю поможет:

Сначала превращаем плоский массив во вложенный:

function createTreeData(data, idKey, parentKey) {
  const tree = Object.fromEntries(data.map(n => [ n[idKey], { ...n, children: [] } ]));

  return Object
    .values(tree)
    .filter(n => !(tree[n[parentKey]] && tree[n[parentKey]].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 createTreeElement = data =>
  data instanceof Array && data.length
    ? data.reduce((ul, n) => (
        ul.append(document.createElement('li')),
        ul.lastChild.append(n.name, createTreeElement(n.children)),
        ul
      ), document.createElement('ul'))
    : '';

Вот так всё просто получается:

const treeData = createTreeData(obj, 'id', 'parent_id');

document.body.insertAdjacentHTML('beforeend', createTreeHTML(treeData));
document.body.append(createTreeElement(treeData));

Но вообще, можно ещё проще - без собирания вложенного массива:

function createTreeElements(arr, idKey, parentKey) {
  const tree = arr.reduce((acc, { [parentKey]: n }) => (
    acc[n] = acc[n] || document.createElement('ul'),
    acc
  ), {});

  arr.forEach(n => (
    tree[n[parentKey]].append(document.createElement('li')),
    tree[n[parentKey]].lastChild.append(n.name, tree[n[idKey]] || '')
  ));

  return Object.values(tree).filter(n => !n.parentNode);
}


document.body.append(...createTreeElements(obj, 'id', 'parent_id'));