javascript - 递归推送到数组以构建树

Question

我正在尝试遍历来自 API 调用的一些 JSON，并对其进行重组以构建一个格式更适合预期用途的树。

这是来自 API 调用的 JSON 示例:

var data = [{
    "id": 1, "name": "Top Node 1", "children": {
        "value": [{
            "id": 11, "name": "Second Node 1", "children": {
                "value": [{
                    "id": 112, "children": null, "name": "Third Node 1",
                },
                {
                    "id": 112, "children": null, "name": "Third Node 2",
                }]
            }
        },
        {
            "id": 13, "name": "Second Node 3", "children": {
                "value": [{
                    "id": 131, "name": "Third Node 3", "children": {
                        "value": [{
                            "id": 1311, "name": "Fourth Node 2", "children": null
                        }]
                    }
                }]
            }
        }]
    }
},
{
    "id": 2, "name": "Top Node 2", "children": null,
}]

这是期望的结果:

var data = [{
    "treename": "Top Node 1", "treeid": 1, "collapsed": false, "children": [{
        "treename": "Second Node 1", "treeid": 11, "collapsed": false, "children": [{
            "treename": "Third Node 1", "treeid": 111, "collapsed": false, "children": []
        },
        {
            "treename": "Third Node 2", "treeid": 112, "collapsed": false, "children": []
        },
        {
            "treename": "Delete", "treeid": "source113", "collapsed": false, "children": []
        }]
    }]
}]; // and so on and so on...

这是我到目前为止尝试过的:

var buildTree = function(obj){
    console.log(traverse(obj, []));
}

var traverse = function(obj, arr){
    obj.forEach((v, k) => {
        arr.push({ children: v.children != null ? traverse(v.children.value, []) : [], treename: v.name, treeid: v.id, collapsed: false });
    });
}

buildTree(data);

jsFiddle

我的做法好像不对，因为数组一直在被覆盖。任何关于如何正确执行此操作的想法将不胜感激:)

Answer 1

您可以映射新对象并​​检查子对象是否可用。然后也映射 child 。

function map({ name: treename, id: treeid, collapsed = false, children }) {
    return {
        treename,
        treeid,
        collapsed,
        children: (children && children.value || []).map(map)
    };
}

var data = [{ id: 1, name: "Top Node 1", children: { value: [{ id: 11, name: "Second Node 1", children: { value: [{ id: 112, children: null, name: "Third Node 1" }, { id: 112, children: null, name: "Third Node 2" }] } }, { id: 13, name: "Second Node 3", children: { value: [{ id: 131, name: "Third Node 3", children: { value: [{ id: 1311, name: "Fourth Node 2", children: null }] } }] } }] } }, { id: 2, name: "Top Node 2", children: null }],
    result = data.map(map);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

ES5

function map(o) {
    return {
        treename: o.name,
        treeid: o.id,
        collapsed: false,
        children: (o.children && o.children.value || []).map(map)
    };
}

var data = [{ id: 1, name: "Top Node 1", children: { value: [{ id: 11, name: "Second Node 1", children: { value: [{ id: 112, children: null, name: "Third Node 1" }, { id: 112, children: null, name: "Third Node 2" }] } }, { id: 13, name: "Second Node 3", children: { value: [{ id: 131, name: "Third Node 3", children: { value: [{ id: 1311, name: "Fourth Node 2", children: null }] } }] } }] } }, { id: 2, name: "Top Node 2", children: null }],
    result = data.map(map);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }