@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)
  • Вопрос задан
  • 61 просмотр
Решения вопроса 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
);

Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы