【问题标题】:(JS) Transform array of objects with path to nested array of objects(JS)将对象数组转换为嵌套对象数组的路径
【发布时间】:2021-07-12 10:05:54
【问题描述】:

我需要用这样的路径转换对象数组:

[
  {
    id: 1,
    path:['A'],
    label:"A1",
  },
  {
    id: 2,
    path:['AA'],
    label:"AA1"
  },
  {
    id: 3,
    path:['A', 'B', 'C'],
    label:"ABC1"
  },
  {
    id: 4,
    path:['A', 'B'],
    label:"AB1"
  },
  {
    id: 5,
    path:['A', 'B', 'C'],
    label:"ABC2"
  }
]

到树之类的东西:

[
  {
    key:'A', //current path
    children:[ // childrens of current path
      {
        id: 1,
        path:['A'],
        label:"A1"
      },
      {
        key:'B',
        children: [
          {
            id: 4,
            path:['A', 'B'],
            label:"AB1"
          },
          {
            key:"C",
            children:[
              {
                id: 3,
                path:['A', 'B', 'C'],
                label:"ABC1"
              },
              {
                id: 5,
                path:['A', 'B', 'C'],
                label:"ABC2"
              }
            ]
          }
        ]
      }
    ]
  },
  {
    key: 'AA',
    children:[
      {
        id: 2,
        path:['AA'],
        label:"AA1"
      },
     ]
  }
]

我需要这个来创建嵌套折叠菜单。 像

  • 一个
    • ...a 的项目
      • ...b 的项目
      • C
        • ...c 项目
  • AA
    • ...AA 项目

提前谢谢,我知道这个问题并不难,但仍然有一些问题( 或者如果我做了坏事或更好的方法,请回复我会很乐意为您提供帮助)

【问题讨论】:

  • 为什么id:2key: 'AA' 的输出中,而key:'A' 没有id?如果对象具有children,则删除path 属性?
  • @adiga ,对不起我的坏(,更新的问题。
  • @adiga 我想添加喜欢,键:...该路径上的所有项目。或者它很糟糕(?。在其他情况下,我将无法将其映射到折叠菜单,我需要此路径中的路径和子项
  • 您的输入数据有 5 个标签,但您的输出只有 3 个。您的输入有 5 个路径和 5 个 id,但输出每个只有 4 个。这背后的逻辑是什么?
  • @trincot 不,再次抱歉(。没注意到。更新的问题

标签: javascript algorithm dom tree


【解决方案1】:

你可以使用递归:

var data = [{'id': 1, 'path': ['A'], 'label': 'A1'}, {'id': 2, 'path': ['AA'], 'label': 'AA1'}, {'id': 3, 'path': ['A', 'B', 'C'], 'label': 'ABC1'}, {'id': 4, 'path': ['A', 'B'], 'label': 'AB1'}, {'id': 5, 'path': ['A', 'B', 'C'], 'label': 'ABC2'}]
function to_tree(d){
   var new_d = {}
   for (var i of d){
      var k = i._path.shift()
      if (!(k in new_d)){
         new_d[k] = []
      }
      new_d[k].push(i)
   }
   return Object.keys(new_d).map(function(x){
        var _pl = {0:[], 1:[]}
        for (var i of new_d[x]){
           _pl[i._path.length > 0 ? 1 :0].push(i)
        }
        return {key:x, children:[..._pl[0].map(function(j){
               delete j['_path']
               return j
           }), to_tree(_pl[1])]}
    });
}
var new_data = data.map(function(x){return {...x, '_path':JSON.parse(JSON.stringify(x.path))}})
console.log(to_tree(new_data))

输出:

[{'key': 'A', 'children': [{'id': 1, 'path': ['A'], 'label': 'A1'}, [{'key': 'B', 'children': [{'id': 4, 'path': ['A', 'B'], 'label': 'AB1'}, [{'key': 'C', 'children': [{'id': 3, 'path': ['A', 'B', 'C'], 'label': 'ABC1'}, {'id': 5, 'path': ['A', 'B', 'C'], 'label': 'ABC2'}, []]}]]}]]}, {'key': 'AA', 'children': [{'id': 2, 'path': ['AA'], 'label': 'AA1'}, []]}]

【讨论】:

  • @Denis 很高兴为您提供帮助!
猜你喜欢
  • 1970-01-01
  • 2018-01-04
  • 1970-01-01
  • 2019-04-26
  • 1970-01-01
  • 2020-01-15
  • 1970-01-01
  • 2020-07-03
  • 1970-01-01
相关资源
最近更新 更多