js 向多层嵌套对象中插入数据

Question

源代码github地址
下面有在线预览链接，可以用chrome，firefox打开预览。
预览地址
截图：

左边树是我读取一个json文件绘出的，右边树也是读取该文件，使用d3生成，数据经过处理后，添加一些坐标属性。

左侧生成树代码：

$.getJSON("./webstack.json", function(data){
    currentNode = data;    // currentNode已经在全局定义过了
    var str = '<ul>';
    selectNode(currentNode);
    str += '</ul>';
    $(".tree-node").html(str)
    function selectNode(node) {
        if(node != null) {
            str += `<li><span>${node.name}</span>&nbsp;&nbsp;&nbsp;<button class="addChildtree">+</button>`
            if(node.children != null && node.children.length != 0 ){
                str += `<ul>`
                for(var i = 0; i < node.children.length; i++) {
                    selectNode(node.children[i]);
                }
                str += `</ul>`
            }
            str += '</li>'
        }
    }
});

我的需求是，点击左侧添加时，将新数据添加进当前currentNode里，然后同步渲染右侧流程图。
我的做法是这样的：

function inserttree(json, currentvalue, newChildTree) {
    if(newChildTree != "" && newChildTree != null) {
        var currentNode = json;
        if(currentNode.name == currentvalue) {
            if(currentNode.children instanceof Array) {
                currentNode.children.push({"name": newChildTree});
            }else {
                currentNode.children = [];
                currentNode.children.push({"name": newChildTree});
            }
        }else {
            if(currentNode.children != null && currentNode.children.length > 0) {
                for(var i = 0; i < currentNode.children.length; i++) {
                    inserttree(currentNode.children[i], currentvalue, newChildTree);
                }
            }
        }
    }
    json = currentNode;
}

获取当前点击的节点值currentvalue和新增值newChildTree,
通过查询currentvalue所在位置，然后添加newChildTree。最终的结果是添加进来了，但是无法把新增的数据复制给完整的currentNode了。

Answer 1

你的tree的数据模型里自己生成个id吧，这样就能遍历到你修改的currentNode了。

Answer 2

验证成功：

function inserttree(json, currentvalue, newChildTree) {
    var currentNode = json;
    if(newChildTree != "" && newChildTree != null) {
        if(currentNode.name == currentvalue) {
            // 如果当前处于收缩状态则是_children有值
            // 如果是展开则是children有值
            // 1. 判断节点有子节点则其children为一个数组或者null，否则则为undefined
            // 2. 如果是数组的话，则push到children里，如果是null，则push到_children里
            
            if(currentNode.children === null){
                currentNode._children.push({"name": newChildTree});
            }else if(currentNode.children instanceof Array) {
                currentNode.children.push({"name": newChildTree});
            }else {
                currentNode.children = [];
                currentNode.children.push({"name": newChildTree});
            }
        }else {
            if(currentNode.children === null) {
                for(var i = 0; i < currentNode._children.length; i++) {
                    inserttree(currentNode._children[i], currentvalue, newChildTree);
                }
            }else if(currentNode.children instanceof Array) {
                for(var i = 0; i < currentNode.children.length; i++) {
                    inserttree(currentNode.children[i], currentvalue, newChildTree);
                }
            }
        }
    }
    return currentNode;
}