Как сделать рекурсию для списка комментариев?

Question

[Айнур Ярулин]

Есть вот такой набор комментариев:

{
  id: 1,
  value: "Привет, я первый комментарий"
  parrent_id: null
},
{
  id: 2,
  value: "Привет, я ответ на первый комментарий"
  parrent_id: 1
},
{
  id: 3,
  value: "А я ответ на ответ"
  parrent_id: 2
},
{
  id: 4,
  value: "Я второй комментарий"
  parrent_id: null
}

Как древовидно вывести список этих комментариев, но чтобы глубина дерева была не больше трёх элементов?

Answer 1

[0xD34F]

Функция, превращающая плоский массив в дерево:

function createTree({
  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]]?.[childrenKey].push(n)
  ));
}

Рекурсивный компонент v-tree, выводящий древовидные данные:

props: {
  items: {
    type: Array,
    default: () => [],
  },
  maxdepth: {
    type: Number,
    default: Infinity,
  },
},

<ul v-if="Array.isArray(items) && items.length && maxdepth > 0">
  <li v-for="n in items" :key="n.id">
    {{ n.value }}
    <v-tree :items="n.children" :maxdepth="maxdepth - 1" />
  </li>
</ul>

Как использовать:

data: () => ({
  treeData: createTree({
    data: flatData,
    parentKey: 'parent_id',
  }),
}),

// или

computed: {
  treeData() {
    return createTree({
      data: this.flatData,
      parentKey: 'parent_id',
    });
  },
},

<v-tree
  :items="treeData"
  :maxdepth="3"
/>

Демо.

Comments

[Айнур Ярулин]

0xD34F, подскажи пожалуйста как сделать чтобы дочерние комментарии находились на одном DOM уровне с родительскими, если закончилась максимальная глубина?

Вроде условие простое, но у меня никак не получается сделать

[0xD34F]

Айнур Ярулин, здесь я вам отвечать не буду. Буду ли отвечать где-то ещё - зависит от вас. Что вам надо сделать, чтобы получить от меня ответ:

Пример данных в тексте вопроса - исправьте его, чтобы он стал синтаксически корректным. И попытайтесь осознать (знаю, что мозгов тут вам может и не хватить, так что да - просто попытайтесь) неприемлемость публикации синтаксически некорректного мусора в тех случаях, когда исправление этой некорректности не является сутью вопроса.

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

[0xD34F]

Айнур Ярулин, то есть, моя помощь вам больше не нужна - ни сейчас, ни когда-либо в будущем. Я правильно понял?

[Айнур Ярулин]

0xD34F, не правильно, очень нужна, особенно в будущем. Мне нравится ваш слишком взрослый стиль поведения, от которого веет таинственностью, мне нравиться, что я постоянно узнаю что-то новое из кода, который вы пишите в ответах.

А кринжовые картинки это уже мой стиль

[0xD34F]

Айнур Ярулин, раз так, вам придётся своему "стилю" изменить. Причём не только в будущем, но и в прошлом - пройтись по своим комментариям и убрать уже оставленный мусор.