Как построить вложенный список на основе плоского массива?

Question

[myskypesla]

Есть массив:

var data = [
  {
    title: "Одежда",
    left: 1,
    right: 22
  },
  {
    title: "Мужская",
    left: 2,
    right: 9
  },
  {
    title: "Женская",
    left: 10,
    right: 21
  },
  {
    title: "Костюмы",
    left: 3,
    right: 8
  },
  {
    title: "Платья",
    left: 11,
    right: 16
  },
  {
    title: "Юбки",
    left: 17,
    right: 18
  },
  {
    title: "Блузы",
    left: 19,
    right: 20
  },
  {
    title: "Брюки",
    left: 4,
    right: 5
  },
  {
    title: "Жакеты",
    left: 6,
    right: 7
  },
  {
    title: "Вечерние",
    left: 12,
    right: 13
  },
  {
    title: "Летние",
    left: 14,
    right: 15
  }
];

Нужно на его основе построить следующий список:

<ul>
  <li>Одежда
    <ul>
      <li>Мужская
        <ul>
          <li>Костюмы
            <ul>
              <li>Брюки</li>
              <li>Жакеты</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Женская
        <ul>
          <li>Платья
            <ul>
              <li>Вечерние</li>
              <li>Летние</li>
            </ul>
          </li>
          <li>Юбки</li>
          <li>Блузы</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Я понял только то, что left и right отвечают за попадание вложенного значения в другое значение и исходя их этого необходимо сформировать список, но дальше никак.

Comments

[twobomb]

Это какой-то бред, сделайте объект типа такого хотя-бы

{
  title: "Одежда",
  child: [{
    title: "Мужская",
    child: [{
      title: "Костюмы"
    }]
  }, {
    title: "Женская",
    child: [{
      title: "Юбки",
    },{
      title: "Блузы",
    }]
  }]
}

[Владимир]

twobomb: ...а дальше - рекурсивный обход.

[kulaeff]

Для решения вашей задачи, сначала погуглите, что такое nested sets. Думаю после этого поймете, как отрендерить такой массив.

[myskypesla]

twobomb: Но ведь на входе у меня такой объект?

Answer 1

[Сергей Мельников]

devacademy.ru/posts/nested-set

const walk = data => {
  if (!data) return;
  for (let i = 0; i < data.length; i++) {
    for (let l = 0; l < data.length; l++) {
      if (data[l].left > data[i].left && data[l].right < data[i].right) {
        data[i].children = data[i].children || []
        data[i].children.push(data.splice(l, 1)[0])
        l--
      }
    }
    walk(data[i].children)
  }
  return data
}

const list = tree => {
  let ul = document.createElement("ul")
  for (let i = 0; i < tree.length; i++) {
    let li = document.createElement("li")
    li.textContent = tree[i].title
    ul.appendChild(li)
    if (tree[i].children) li.appendChild(list(tree[i].children))
  }
  return ul
}

let tree = walk(data)

console.log(tree)

let listNode = list(tree)

console.log(listNode)

Answer 2

[Алексей Шашенков]

Вот так получилось Лень генерировать DOM, я не думаю что там будут пролемы