Преобразование данных из плоских во вложенную древовидную структуру на основе значения атрибута indent

#javascript #arrays #object #indentation

#javascript #массивы #объект #отступ

Вопрос:

У нас есть массив, подобный этому:

 const pages= [
{
  "name": "Hello World",
  "code": "hello-world",
  "indent": 0,
  "subpages": null
},
{
  "name": "What is going on?",
  "code": "what-is-going-on",
  "indent": 1,
  "subpages": null
},
{
  "name": "My Page",
  "code": "my-page",
  "indent": 0,
  "subpages": null
}
  ]
 

И мы хотим вложить его так, чтобы это выглядело так:

   "data": {
"hello-world": {
  "name": "Hello World",
  "subpages": {
    "what-is-going-on": {
      "name": "What is going on?",
      "subpages": {}
    }
  }
},
"my-page": {
  "name": "My Page",
  "subpages": {}
}}}
 

До сих пор мне удавалось заставить его работать, но он терпит неудачу, когда есть БОЛЬШЕ ОБЪЕКТОВ с БОЛЬШИМИ ОТСТУПАМИ или просто больше отступов, превышающих 1 в строке.
Это код, который я придумал

 var arr = []
for (let i=0; i<pages.length; i  ) {
  
if (pages[i].indent==0) {
  arr.push(pages[i]);
}
else {
    arr[i-1].children=pages[i]
}
}
 

Трудно это признать, но я чувствую, что этот подход не будет работать с большим количеством данных — большими отступами. Я действительно не знаю, откуда должно исходить мое решение.
Как вы думаете, что будет работать?
Спасибо за ваше время.

Ответ №1:

Вы могли бы сделать это с помощью reduce метода и использовать массив для сохранения уровней отступов.

 const pages = [{"name":"Hello World","code":"hello-world","indent":0,"subpages":null},{"name":"What is going on?","code":"what-is-going-on","indent":1,"subpages":null},{"name":"My Page","code":"my-page","indent":0,"subpages":null}]

const result = {}
const levels = [result]

pages.reduce((r, {name, code, indent}) => {
  const subpages = {}
  r[indent][code] = {name, subpages}
  r[indent   1] = subpages
  
  return r
}, levels)

console.log(result)