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

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

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

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

function createTreeData(data, {
  key = 'id',
  parentKey = 'parentId',
  childrenKey = 'children',
} = {}) {
  const tree = Object.fromEntries(data.map(n => [
    n[key],
    { ...n, [childrenKey]: [] },
  ]));

  return Object.values(tree).filter(n => !(
    tree[n[parentKey]] && tree[n[parentKey]][childrenKey].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, { parentKey: 'parent_id' });

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

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

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

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

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

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