【问题标题】:Javascript array of object to tree structureJavascript对象数组到树结构
【发布时间】:2019-10-15 09:15:57
【问题描述】:

我有一个这样的对象数组..

var obj_1 = {id:1, text:"Title 1", checked: false, unitId:0, line: 0};
var obj_2 = {id:2, text:"Title 1.1", checked: false, unitId:1, line: 0};
var obj_3 = {id:3, text:"Title 1.2", checked: false, unitId:1, line: 1};
var obj_4 = {id:4, text:"Title 1.1.1", checked: false, unitId:0, line: 1};
var obj_5 = {id:5, text:"Title 2", checked: false, unitId:0, line: 1};

var obj_list = [obj_1,obj_2,obj_3,obj_4,obj_5];

我想把数组格式化成这样的树形结构。

text: 'Main Root',
checked: false,
children: {
    {
        checked : false,
        text : 'Unit 1'
        children : {
            {
                checked : false,
                text : 'Line A',
                children : {
                    {id:1, text:"Title 1", unitId:0, line: 0}
                }
            },{
                checked: false,
                text: 'Line B',
                children : {
                    {id:4, text:"Title 1.1.1", unitId:0, line: 1},
                    {id:5, text:"Title 2", unitId:0, line: 1}
                }
            }
        },
    },{
        checked : false,
        text : 'Unit 2'
        children : {
            {
                checked : false,
                text : 'Line A',
                children : {
                    {id:2, text:"Title 1.1", unitId:1, line: 0}
                }
            },{
                checked: false,
                text: 'Line B',
                children : {
                    {id:2, text:"Title 1.2", unitId:1, line: 0}
                }
            }
        },

    }
}

这是我想要的输出,称为主根的顶级根是静态的,他的孩子是动态的。我已经尝试了很长时间,请帮助我弄清楚。提前致谢。

【问题讨论】:

  • 孩子不应该是一个数组而不是一个对象吗?对我来说似乎是一个无效的结构

标签: javascript json


【解决方案1】:

有点意思

var obj_1 = {id:1, text:"Title 1", checked: false, unitId:0, line: 0};
var obj_2 = {id:2, text:"Title 1.1", checked: false, unitId:1, line: 0};
var obj_3 = {id:3, text:"Title 1.2", checked: false, unitId:1, line: 1};
var obj_4 = {id:4, text:"Title 1.1.1", checked: false, unitId:0, line: 1};
var obj_5 = {id:5, text:"Title 2", checked: false, unitId:0, line: 1};

var obj_list = [obj_1,obj_2,obj_3,obj_4,obj_5];
let result = obj_list.reduce((acc,o)=>{
    let unitId = o.unitId;
    let cur = acc[unitId];
    if(!cur){
        cur = {checked:false, text: `Unit ${unitId + 1}`, children:[]};
        acc[unitId] = cur;
    }
    cur.children.push(o);
    return acc;
},{});
result = Object.values(result).map(v=>{
    let dic = v.children.reduce((acc, o)=>{
        let lineId = o.line;
        let cur = acc[lineId];
        if(!cur){
            cur = {checked:false, text: `Line ${String.fromCharCode(lineId+65)}`, children:[]};
            acc[lineId] = cur;
        }
        cur.children.push(o);
        return acc;
    },{})
    v.children = Object.values(dic);
    return v;
})

result = {text:'Main Root', checked:false, children:result}
console.log(JSON.stringify(result,null,2))

【讨论】:

    猜你喜欢
    • 2021-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-14
    相关资源
    最近更新 更多