Построить многоуровневое дерево

Рейтинг: 0Ответов: 1Опубликовано: 18.01.2023

Нужно построить многоуровневое дерево зная name и parent_name. Понимаю, что нужна рекурсия, но никак не могу написать. Я строю 1 и 2 уровень, а дальше никак не пойму как построить 3 уровень, т.к. не пойму по какому "пути" искать родителя.

Сам список, который получаю:

[
  {
    "Item": [
      "", // имя родителя если есть (parent_name)
      1, // уровень вложенности элемента
      "Услуга №1" // имя элемента
    ]
  },
  {
    "Item": [
      "",
      1,
      "Услуга №2"
    ]
  },
  {
    "Item": [
      "",
      1,
      "Услуга №3"
    ]
  },
  {
    "Item": [
      "Услуга №4", // имя родителя если есть (parent_name)
      2, // уровень вложенности элемента
      "Услуга №4.1" // имя элемента
    ]
  },
  {
    "Item": [
      "",
      1,
      "Услуга №4"
    ]
  },
  {
    "Item": [
      "Услуга №3",
      2,
      "Услуга №3.1"
    ]
  },
  {
    "Item": [
      "Услуга №3",
      2,
      "Услуга №3.2"
    ]
  },
  {
    "Item": [
      "Услуга №3.3",
      3,
      "Услуга №3.3.1"
    ]
  },
  {
    "Item": [
      "Услуга №3.3",
      3,
      "Услуга №3.3.2"
    ]
  },
  {
    "Item": [
      "Услуга №3.2",
      3,
      "Услуга №3.2.1"
    ]
  },
  {
    "Item": [
      "Услуга №3",
      2,
      "Услуга №3.3"
    ]
  }
]

А мне в итоге нужна вот такая структура:

[
  {
    title: "Услуга 1",
    child: [
      {
        title: "Услуга 1.1",
        child: [
          {
            title: "Услуга 1.1.1",
          },
          {
            title: "Услуга 1.1.2",
            child: [
              {
                title: "Услуга 1.1.1",
              },
              {
                title: "Услуга 1.1.2",
              },
            ],
          },
        ],
      },
      {
        title: "Услуга 1.2",
      },
      {
        title: "Услуга 1.3",
        child: [
          {
            title: "Услуга 1.3.1",
            child: [
              {
                title: "Услуга 1.1.1",
              },
              {
                title: "Услуга 1.1.2",
              },
            ],
          },
          {
            title: "Услуга 1.3.2",
          },
        ],
      },
    ],
  },
  {
    title: "Услуга 2",
    child: [
      {
        title: "Услуга 1.1.1",
      },
      {
        title: "Услуга 1.1.2",
      },
    ],
  },
]
javascript дерево treeview
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Предложу такой вариант...

const arr = [{
    "Item": [
      "", // имя родителя если есть (parent_name)
      1, // уровень вложенности элемента
      "Услуга №1" // имя элемента
    ]
  },
  {
    "Item": [
      "",
      1,
      "Услуга №2"
    ]
  },
  {
    "Item": [
      "",
      1,
      "Услуга №3"
    ]
  },
  {
    "Item": [
      "Услуга №4", // имя родителя если есть (parent_name)
      2, // уровень вложенности элемента
      "Услуга №4.1" // имя элемента
    ]
  },
  {
    "Item": [
      "",
      1,
      "Услуга №4"
    ]
  },
  {
    "Item": [
      "Услуга №3",
      2,
      "Услуга №3.1"
    ]
  },
  {
    "Item": [
      "Услуга №3",
      2,
      "Услуга №3.2"
    ]
  },
  {
    "Item": [
      "Услуга №3.3",
      3,
      "Услуга №3.3.1"
    ]
  },
  {
    "Item": [
      "Услуга №3.3",
      3,
      "Услуга №3.3.2"
    ]
  },
  {
    "Item": [
      "Услуга №3.2",
      3,
      "Услуга №3.2.1"
    ]
  },
  {
    "Item": [
      "Услуга №3",
      2,
      "Услуга №3.3"
    ]
  }
]

const a = test(1, '', arr)
console.log(a)

//
function test(n, name, arr) {
  let a = arr.filter(o => {
    if (o.Item[1] != n) return false
    if (o.Item[0] != name) return false
    return true
  })
  a = a.map(o => {
    const title = o.Item[2]
    const obj = {
      title
    }
    const child = test(n + 1, title, arr)
    if (child.length) obj.child = child
    return obj
  })
  return a
}