JS数据转成父子节点数据

发布于 2022-09-07 11:48:54 字数 1402 浏览 7 评论 0

原始的数据是平铺的 比如

originalData: [
        { company: 'AAA', department:'AAA-D1', office: 'AAA-D1-O1', pass: 1, onhold: 3},
        { company: 'AAA', department:'AAA-D1', office: 'AAA-D1-O2', pass: 3, onhold: 5},
        { company: 'AAA', department:'AAA-D2', office: 'AAA-D2-O1', pass: 2, onhold: 7},
        { company: 'BBB', department:'BBB-D1', office: 'BBB-D1-O1', pass: 1, onhold: 3},
        { company: 'BBB', department:'BBB-D2', office: 'BBB-D2-O1', pass: 4, onhold: 3},
        { company: 'BBB', department:'BBB-D3', office: 'BBB-D3-O1', pass: 1, onhold: 3},
        ....
        ....
      ]

希望转换成

treeData: [
    { label: 'AAA', department:'AAA-D1', office: 'AAA-D1-O1', pass: 6, onhold: 15,   // company level 
        children: [  // department level 
            {label: 'AAA-D1',  pass: 4, onhold: 8,
                children: [  // office level
                    {label: 'AAA-D1-O1', pass: 1, onhold: 3},
                    {label: 'AAA-D1-O2', pass: 1, onhold: 3},
                ]
            },
            {label: 'AAA-D2',  pass: 2, onhold: 7,
                children: [
                    {label: 'AAA-D2-O1', pass: 1, onhold: 3},
                ]
            },
        ]
    },
    ...
    ...
]
    

根据指定的列 转换成父子结构的数据 比如 上面的是根据 ['company', 'department', 'office'] 不知道怎么写了 请大神指导 :( :( :( :( :(

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

我ぃ本無心為│何有愛 2022-09-14 11:48:54

答完才发现你要的是能根据指定列进行映射...

那我再想想,下面的当参考吧 ORZ...


var map = originalData.reduce((p, c) => {
    let {company, department, office, pass, onhold} = c
    if (!p[company]) p[company] = {}
    if (!p[company][department]) p[company][department] = {}
    p[company][department][office] = {pass, onhold}
    return p
}, {})

var reduce = (obj, key) => obj.children.reduce((p, c) => [p += c[key], p][1], 0)

var result = Object.keys(map).map(cKey => {
    let company = {label: cKey}
    company.children = Object.keys(map[cKey]).map(dKey => {
        let department = {label: dKey}
        department.children = Object.keys(map[cKey][dKey]).map(oKey => {
            let office = map[cKey][dKey][oKey]
            return {label: oKey, pass: office.pass, onhold: office.onhold}
        })
        ['onhold', 'pass'].forEach(key => department[key] = reduce(department, key))
        return department
    })
    ['onhold', 'pass'].forEach(key => company[key] = reduce(company, key))
    return company
})

输出:

[
    { 
        "label": "AAA", "onhold": 15,"pass": 6
         "children": [ { "label": "AAA-D1", "onhold": 8, "pass": 4
                         "children": [ { "label": "AAA-D1-O1", "pass": 1, "onhold": 3 },
                                       { "label": "AAA-D1-O2", "pass": 3, "onhold": 5 }]
                       }, {
                         "label": "AAA-D2", "onhold": 7,"pass": 2
                         "children": [ { "label": "AAA-D2-O1", "pass": 2, "onhold": 7 } ]
                       }]
    }, {
        "label": "BBB", "onhold": 9,"pass": 6
        "children": [ { "label": "BBB-D1", "onhold": 3, "pass": 1
                        "children": [ { "label": "BBB-D1-O1", "pass": 1, "onhold": 3 }] 
                      }, {
                         "label": "BBB-D2", "onhold": 3,"pass": 4
                         "children": [ { "label": "BBB-D2-O1", "pass": 4, "onhold": 3 } ]
                      }, {
                          "label": "BBB-D3", "onhold": 3,"pass": 1
                          "children": [ { "label": "BBB-D3-O1", "pass": 1, "onhold": 3 } ]
                      }]
   }]

思路上是先把原始数组做一次树级映射,然后再从树生成各层次信息,这样会比较好理解一些。

你题目描述中有一些奇怪的地方:company level 里的 departmentoffice 的取值标准不清楚,所以就没写,不过这个要加也就是在生成 result 那一步,创建 company 时加入节点信息即可,不会很难。

○闲身 2022-09-14 11:48:54

你的输出格式应该有问题,起码
label: 'AAA', department:'AAA-D1', office: 'AAA-D1-O1', pass: 6, onhold: 15, // company level是不合理的,最多是label: 'AAA', pass: 6, onhold: 15, // company level
如果数据能够保证全是这样的结构(只有如上的3级),其实还是比较好处理的。

var moriginalData= [
        { company: 'AAA', department:'AAA-D1', office: 'AAA-D1-O1', pass: 1, onhold: 3},
        { company: 'AAA', department:'AAA-D1', office: 'AAA-D1-O2', pass: 3, onhold: 5},
        { company: 'AAA', department:'AAA-D2', office: 'AAA-D2-O1', pass: 2, onhold: 7},
        { company: 'BBB', department:'BBB-D1', office: 'BBB-D1-O1', pass: 1, onhold: 3},
        { company: 'BBB', department:'BBB-D2', office: 'BBB-D2-O1', pass: 4, onhold: 3},
        { company: 'BBB', department:'BBB-D3', office: 'BBB-D3-O1', pass: 1, onhold: 3}
      ];
function a2o(originalData){
    var outData=[];
    var outObj={};
    for(var i=0;i<originalData.length;i++){
        var company= originalData[i].company;
        var department= originalData[i].department;
        var office={label:originalData[i].office, pass:originalData[i].pass, onhold:originalData[i].onhold};
        if(outObj[company]===undefined){
            outObj[company]={childrenKey:[], pass:0, onhold:0};
        }
        if(outObj[company][department]===undefined){
            outObj[company][department]={children:[], pass:0, onhold:0 };
            outObj[company].childrenKey.push(department)
        }
        outObj[company][department].children.push(office);

        outObj[company][department].pass=outObj[company][department].pass+office.pass;
        outObj[company].pass=outObj[company].pass+office.pass;

        outObj[company][department].onhold=outObj[company][department].onhold+office.onhold;
        outObj[company].onhold=outObj[company].onhold+office.onhold;
    }
    for( var com in outObj){
        var tmpA={label:com, pass:outObj[com].pass, onhold:outObj[com].onhold, children:[]};
        for (var j=0; j<outObj[com].childrenKey.length; j++ ){
            var tD=outObj[com][ outObj[com].childrenKey[j] ];
            tmpA.children.push({label:outObj[com].childrenKey[j] ,
                                pass:tD.pass , 
                                onhold:tD.onhold ,
                                children:tD.children} );
        }
        outData.push(tmpA);
    }
    return outData;
}   

var treeDate=a2o(moriginalData)
console.log(treeDate);  
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文