利用Key-Value将没有父子关系的数据转成树形结构数据-JS篇

431 阅读2分钟

网上有很多将具有换父子关系的数据转成树形结构数据,那么对于没有父子关系的数据怎么转换呢?

转换思路:

  1. 将没有父子关系的数据转成有父子关系的数据

  2. 对有父子关系的数据转成树形结构数据 数据如下:

[
        {
            "province": "北京",
            "city": "北京",
            "value": 48
        },
        {
            "province": "福建",
            "city": "福州",
            "value": 50
        },
        {
            "province": "福建",
            "city": "厦门",
            "value": 30
        },
        {
            "province": "福建",
            "city": "泉州",
            "value": 70
        },
        {
            "province": "江苏",
            "city": "南京",
            "value": 60
        },
        {
            "province": "江苏",
            "city": "苏州",
            "value": 99
        },
        {
            "province": "江苏",
            "city": "无锡",
            "value": 23
        },
        {
            "province": "江苏",
            "city": "常州",
            "value": 24
        }
    ]

中间过程:

{
        "北京": {"province": "北京", "city": "北京", "value": 48, "parent_id": 0},
        "北京_北京": {"province": "北京", "city": "北京", "value": 48, "parent_id": "北京"},
        "福建": {"province": "福建", "city": "泉州", "value": 70, "parent_id": 0},
        "福建_福州": {"province": "福建", "city": "福州", "value": 50, "parent_id": "福建"},
        "福建_厦门": {"province": "福建", "city": "厦门", "value": 30, "parent_id": "福建"},
        "福建_泉州": {"province": "福建", "city": "泉州", "value": 70, "parent_id": "福建"},
        "江苏": {"province": "江苏", "city": "常州", "value": 24, "parent_id": 0},
        "江苏_南京": {"province": "江苏", "city": "南京", "value": 60, "parent_id": "江苏"},
        "江苏_苏州": {"province": "江苏", "city": "苏州", "value": 99, "parent_id": "江苏"},
        "江苏_无锡": {"province": "江苏", "city": "无锡", "value": 23, "parent_id": "江苏"},
        "江苏_常州": {"province": "江苏", "city": "常州", "value": 24, "parent_id": "江苏"}
    }

转换后的数据:

[{
        "province": "北京",
        "city": "北京",
        "value": 48,
        "parent_id": 0,
        "children": [{"province": "北京", "city": "北京", "value": 48, "parent_id": "北京"}]
    }, {
        "province": "福建",
        "city": "泉州",
        "value": 70,
        "parent_id": 0,
        "children": [{"province": "福建", "city": "福州", "value": 50, "parent_id": "福建"}, {
            "province": "福建",
            "city": "厦门",
            "value": 30,
            "parent_id": "福建"
        }, {"province": "福建", "city": "泉州", "value": 70, "parent_id": "福建"}]
    }, {
        "province": "江苏",
        "city": "常州",
        "value": 24,
        "parent_id": 0,
        "children": [{"province": "江苏", "city": "南京", "value": 60, "parent_id": "江苏"}, {
            "province": "江苏",
            "city": "苏州",
            "value": 99,
            "parent_id": "江苏"
        }, {"province": "江苏", "city": "无锡", "value": 23, "parent_id": "江苏"}, {
            "province": "江苏",
            "city": "常州",
            "value": 24,
            "parent_id": "江苏"
        }]
    }]

示例代码:

let arr = [
        {
            "province": "北京",
            "city": "北京",
            "value": 48
        },
        {
            "province": "福建",
            "city": "福州",
            "value": 50
        },
        {
            "province": "福建",
            "city": "厦门",
            "value": 30
        },
        {
            "province": "福建",
            "city": "泉州",
            "value": 70
        },
        {
            "province": "江苏",
            "city": "南京",
            "value": 60
        },
        {
            "province": "江苏",
            "city": "苏州",
            "value": 99
        },
        {
            "province": "江苏",
            "city": "无锡",
            "value": 23
        },
        {
            "province": "江苏",
            "city": "常州",
            "value": 24
        },
    ];
​
    let fieldList = [{
        label: '省份',
        value: 'province',
    }, {
        label: '城市',
        value: 'city',
    }]
    console.log(tree(arr));
​
    function tree(arr, fieldList) {
        let list = JSON.parse(JSON.stringify(arr));
        let tree = [];
        let map = {};
        
        for (var i = 0; i < list.length; i++) {
            let obj = list[i];
            let keyArr = [];
            for (var j = 0; j < fieldList.length; j++) {
                let field = fieldList[j];
                let keyValue = field.value;
                let label = obj[keyValue];
                let parent = 0;
​
                if (j > 0) {
                    parent = keyArr.join('_')
                }
​
                keyArr.push(label);
                let newObj = JSON.parse(JSON.stringify(obj));
                newObj.parent_id = parent;
​
                map[keyArr.join('_')] = newObj
            }
        }
​
        console.log('map:', map)
​
        Object.keys(map).forEach(function (e1, e2, e3) {
            let obj = map[e1];
            let parent = map[obj.parent_id]
​
            if (parent) {
                (parent.children || (parent.children = [])).push(obj)
            } else {
                tree.push(obj)
            }
​
        })
​
        return tree;
    }