Как правильно распарсить список зависимых объектов и затипизировать рекурсию массивов?

Question

[Boris007]

Есть список объектов в массиве
Как правильно их распарсить для вывода через список html элементов?

interface Item {
  id: string;
  parentId: null | string;
  categoriesIds: string[];
  title: string;
  userId: string;
}

const item_list = [
{
    "id": "i1",
    "parentId": null,
    "categoriesIds": ["c8"],
    "title": "rubber",
    "userId": "u81"
},
{
    "id": "i2",
    "parentId": null,
    "categoriesIds": ["c2"],
    "title": "tragedy",
    "userId": "u76"
},
{
    "id": "i3",
    "parentId": "i2",
    "categoriesIds": [],
    "title": "ease",
    "userId": "u81"
},
{
    "id": "i4",
    "parentId": "i3",
    "categoriesIds": [],
    "title": "round",
    "userId": "u65"
},
{
    "id": "i5",
    "parentId": "i4",
    "categoriesIds": ["c3"],
    "title": "ladybug",
    "userId": "u54"
},
{
    "id": "i6",
    "parentId": "i3",
    "categoriesIds": ["c20"],
    "title": "spinach",
    "userId": "u14"
},
{
    "id": "i7",
    "parentId": "i3",
    "categoriesIds": ["c23", "c10"],
    "title": "impact",
    "userId": "u48"
},
{
    "id": "i8",
    "parentId": "i7",
    "categoriesIds": ["c30"],
    "title": "clerk",
    "userId": "u51"
},
{
    "id": "i9",
    "parentId": "i8",
    "categoriesIds": ["c7", "c5", "c16", "c28"],
    "title": "dot",
    "userId": "u23"
}
]

У меня пока получилось только сделать массивы массивов, но как мне этой же функцией сделать это сразу выводом html элементов, не могу понять
И как типизировать такую функцию?

function createItemTree(list: Item[], parentId: null | string = null): any {
  return list.filter(item => item.parentId === parentId)
  .map((item: Item) => {
    return createItemTree(list, item.id)
  })
}

createItemTree(item_list)

Answer 1

[Александр]

Типизировать можно и таким образом:

type Branch<T> = {
  data: T;
  children: Branch<T>[];
};

type Tree<T> = Branch<T>[];

const createTree = <T, K>(
  collection: T[],
  extractId: (entry: T) => K,
  extractParentId: (entry: T) => K | null
): Tree<T> => {
  const cache = new Map<K, Branch<T>>();
  const tree: Tree<T> = [];

  for (const entry of collection) {
    const id = extractId(entry);
    const parentId = extractParentId(entry);
    const branch: Branch<T> = {
      data: entry,
      children: []
    };

    const root =
      parentId !== null ? cache.get(parentId)?.children ?? tree : tree;
    root.push(branch);
    cache.set(id, branch);
  }

  return tree;
};

const tree = createTree(
  item_list,
  (entry) => entry.id,
  (entry) => entry.parentId
);