json数据转换,扁平化数组转为树形结构?求指点

niaogege
  • 243

需求是将扁平化的数组转成树形结构,比如:
const a = [[1,2,3],['a','b','c'],['A','B','C']];
const res = [];
要求a数组转化成res是这个样子:

[
  {
    label: '1',
    children: 
      [
        { label: 'a',
          children:[
            {
              label:'A'
            }
          ]
        }
      ]
  },
{
    label: '2',
    children: 
      [
        { label: 'b',
          children:[
            {
              label:'B'
            }
          ]
        }
      ]
  },
  {
    label: '3',
    children: 
      [
        { label: 'c',
          children:[
            {
              label:'C'
            }
          ]
        }
      ]
  },
]
回复
阅读 6k
3 个回答
niaogege
  • 243
✓ 已被采纳
var a = [
['123', '3232', '23123'],
['xxx', 'qqq', 'asdj'],
['xxx', 'qqq', 'asdj'],
['xxx', 'qqq', 'asdj'],
['xxx', 'qqq', 'asdj']
]

var res = []
for (let i = 0; i < a[0].length; i += 1) {
  const obj = {}
let el = obj
for (let j = 0; j < a.length; j += 1) {
     if (j === 0 ) {
       el.label = a[j][i]
       el.children = []
     } else {
       el.children.push({
         label: a[j][i],
         children: []
       })
       el = el.children[0]
     }
  }
  res.push(obj)
}
console.log(res)
    /**
     * 将扁平的结构转换为树形结构
     * 1将节点分类,分别装到数组的对应层中
     * 2 从最后一层向上遍历,将节点赛到上一层他父节点的chilren中
     *  使用限制:
     *  节点必须标有层数表示它在哪一层
     *   传入数组中对象必要参数:id, menu_level, parent_id
     */
    function buildMenu(menuList){
        console.time('buildMenu')
        let levels = new Array();
        //第一个for循环,将menulist数组中每个对象转为类似JOSN格式-> id : {}
        for(let i in menuList){
            //将每个menuList[i]转成对象,装到levels数组中,在第i层装到level[i-1]中
            if(!levels[menuList[i].menu_level]){
                levels[menuList[i].menu_level] = new Object();
            }
            levels[menuList[i].menu_level][menuList[i].id] = menuList[i];
        }
        //将父往子里面塞
        for(let i =  levels.length -1; i > 0; i--){
            for(let obj in levels[i]){
                //向这个节点的父节点的children里加她自己
                if(levels[i - 1][levels[i][obj].parent_id ].children == undefined){
                    levels[i - 1][levels[i][obj].parent_id ].children = new Object();
                }
                levels[i - 1][levels[i][obj].parent_id ].children[levels[i][obj].id] = levels[i][obj];
            }
        }
        console.timeEnd('buildMenu');
        return levels[0];
    }

测试数据

var menu_list = [{
  id: '1',
  menu_icon: '',
  menu_name: '设置',
  menu_url: 'setting',
  menu_level: 0,
  parent_id: 0,
  isAuth: true
}, {
  id: '1-1',
  menu_icon: '',
  menu_name: '权限设置',
  menu_url: 'setting.permission',
  menu_level: 1,
  parent_id: '1',
  isAuth: true
}, {
  id: '1-1-1',
  menu_icon: '',
  menu_name: '用户管理列表',
  menu_url: 'setting.permission.user_list',
  menu_level: 2,
  parent_id: '1-1',
  isAuth: true
}, {
  id: '1-1-2',
  menu_icon: '',
  menu_name: '用户管理新增',
  menu_url: 'setting.permission.user_add',
  menu_level: 2,
  parent_id: '1-1',
  isAuth: true
}, {
  id: '1-1-3',
  menu_icon: '',
  menu_name: '角色管理列表',
  menu_url: 'setting.permission.role_list',
  menu_level: 2,
  parent_id: '1-1',
  isAuth: true
}, {
  id: '1-1-4',
  menu_icon: '',
  menu_name: '角色管理新增',
  menu_url: 'setting.permission.role_add',
  menu_level: 2,
  parent_id: '1-1',
  isAuth: true
}, {
  id: '1-2',
  menu_icon: '',
  menu_name: '菜单设置',
  menu_url: 'setting.menu',
  menu_level: 1,
  parent_id: '1',
  isAuth: true
}, {
  id: '1-2-1',
  menu_icon: '',
  menu_name: '菜单列表',
  menu_url: 'setting.menu.menu_list',
  menu_level: 2,
  parent_id: '1-2',
  isAuth: true
}, {
  id: '1-2-2',
  menu_icon: '',
  menu_name: '菜单添加',
  menu_url: 'setting.menu.menu_add',
  menu_level: 2,
  parent_id: '1-2',
  isAuth: true
}, {
  id: '2',
  menu_icon: '',
  menu_name: '订单',
  menu_url: 'order',
  menu_level: 0,
  parent_id: 0,
  isAuth: true
}, {
  id: '2-1',
  menu_icon: '',
  menu_name: '报单审核',
  menu_url: 'order.orderreview',
  menu_level: 1,
  parent_id: '2',
  isAuth: true
}, {
  id: '2-2',
  menu_icon: '',
  menu_name: '退款管理',
  menu_url: 'order.refundmanagement',
  menu_level: 1,
  parent_id: '2',
  isAuth: true
}, {
  id: '2-3',
  menu_icon: '',
  menu_name: '实物订单',
  menu_url: 'order.realorder',
  menu_level: 1,
  parent_id: '2',
  isAuth: true
}, {
  id: '2-1-1',
  menu_icon: '',
  menu_name: '全部报单',
  menu_url: 'order.orderreview.all',
  menu_level: 2,
  parent_id: '2-1',
  isAuth: true
}, {
  id: '2-2-1',
  menu_icon: '',
  menu_name: '所有记录',
  menu_url: 'order.refundmanagement.all',
  menu_level: 2,
  parent_id: '2-2',
  isAuth: true
}, {
  id: '2-2-2',
  menu_icon: '',
  menu_name: '待处理',
  menu_url: 'order.refundmanagement.wait',
  menu_level: 2,
  parent_id: '2-2',
  isAuth: true
}, {
  id: '2-2-3',
  menu_icon: '',
  menu_name: '退款原因',
  menu_url: 'order.refundmanagement.result',
  menu_level: 2,
  parent_id: '2-2',
  isAuth: true
}, {
  id: '2-3-1',
  menu_icon: '',
  menu_name: '实物订单管理',
  menu_url: 'order.realorder.list',
  menu_level: 2,
  parent_id: '2-3',
  isAuth: true
}, {
  id: '3',
  menu_icon: '',
  menu_name: '商品',
  menu_url: 'commodity',
  menu_level: 0,
  parent_id: 0,
  isAuth: true
}, {
  id: '3-1',
  menu_icon: '',
  menu_name: '分类管理',
  menu_url: 'commodity.classifieldmanagement',
  menu_level: 1,
  parent_id: '3',
  isAuth: true
}, {
  id: '3-1-1',
  menu_icon: '',
  menu_name: '管理',
  menu_url: 'commodity.classifieldmanagement.management',
  menu_level: 2,
  parent_id: '3-1',
  isAuth: true
}, {
  id: '3-1-2',
  menu_icon: '',
  menu_name: '编辑或新增',
  menu_url: 'commodity.classifieldmanagement.edit',
  menu_level: 2,
  parent_id: '3-1',
  isAuth: true
}, {
  id: '3-2',
  menu_icon: '',
  menu_name: '品牌管理',
  menu_url: 'commodity.brandmanagement',
  menu_level: 1,
  parent_id: '3',
  isAuth: true
}, {
  id: '3-2-1',
  menu_icon: '',
  menu_name: '管理',
  menu_url: 'commodity.brandmanagement.management',
  menu_level: 2,
  parent_id: '3-2',
  isAuth: true
}, {
  id: '3-2-2',
  menu_icon: '',
  menu_name: '编辑或新增',
  menu_url: 'commodity.brandmanagement.edit',
  menu_level: 2,
  parent_id: '3-2',
  isAuth: true
}, {
  id: '3-3',
  menu_icon: '',
  menu_name: '商品管理',
  menu_url: 'commodity.commoditymanagement',
  menu_level: 1,
  parent_id: '3',
  isAuth: true
}, {
  id: '3-3-1',
  menu_icon: '',
  menu_name: '管理',
  menu_url: 'commodity.commoditymanagement.management',
  menu_level: 2,
  parent_id: '3-3',
  isAuth: true
}, {
  id: '3-3-2',
  menu_icon: '',
  menu_name: '编辑或新增',
  menu_url: 'commodity.commoditymanagement.edit',
  menu_level: 2,
  parent_id: '3-3',
  isAuth: true
}, {
  id: '3-4',
  menu_icon: '',
  menu_name: '类型管理',
  menu_url: 'commodity.typeManagement',
  menu_level: 1,
  parent_id: '3',
  isAuth: true
}, {
  id: '3-4-1',
  menu_icon: '',
  menu_name: '管理',
  menu_url: 'commodity.typeManagement.management',
  menu_level: 2,
  parent_id: '3-4',
  isAuth: true
}, {
  id: '3-4-2',
  menu_icon: '',
  menu_name: '编辑或新增',
  menu_url: 'commodity.typeManagement.edit',
  menu_level: 2,
  parent_id: '3-4',
  isAuth: true
}];

问题描述不清楚

[[1,2,3],['a','b','c'],['A','B','C']]

[[1,2,3],['a','b','c'],['A','B']]

[[1,2],['a','b','c'],['A','B','C']]

[[1,2,3],['a',['x','y'],'c'],['A','B','C']]
宣传栏