javascript - 使用 javascript 在嵌套的 JSON 对象中添加或删除特定节点

Question

我想制作树状结构。在每个节点中有两个符号(+ 添加一个节点和 - 删除特定节点)。我面临的问题是如何从嵌套的 json 中添加/删除节点(子节点)。对于一层或两层嵌套没问题，但对于不止一层，我无法编写一些通用代码来执行此操作。下面是我必须对其进行添加/删除操作的树的默认 json 和图片。在 HTML 和 CSS 中我没有问题。欢迎提供一些线索或提示，因为最近 2 天我正在处理这个问题。谢谢

JSON :
{
"name": "abc",
"children": [{
        "name": "def",
        "children": [{
            "name": "jkl",
            "children": [{
                "name": "vwxyz",
                "children": []
            }]

        }]
    },
    {
        "level": "2",
        "name": "ghi",
        "children": [{
            "name": "mno",
            "children": []
        }, {
            "name": "pqr",
            "children": [{
                "name": "stu",
                "children": []
            }]
        }]
    }
]
}

Answer 1

由于您拥有唯一的名称，因此您可以创建一个以名称属性作为键并以树节点作为值的查找对象。然后，您可以根据名称快速进入任何节点。通过向每个节点对象添加父属性，您可以找到给定节点的父节点。

var data = { name: "abc", ... };
var lookup = {};

function buildLookup(node, parent) {
  node.parent = parent;
  lookup[node.name] = node;
  if (node.children) {
    for (var i = 0; i < node.children.length; i++) {
      buildLookup(node.children[i], node);
    }
  }
}

buildLookup(data, null);
// lookup object now populated

您的 -/+ 按钮可以合并名称属性以传递给事件处理程序:

<button class="button-plus" data-name="def">+</button>
<button class="button-minus" data-name="def">-</button>

处理程序:

var addBtns = document.querySelectorAll(".button-plus");
for (var i=0; i < addBtns.length; i++) {
  addBtns[i].addEventListener("click", function (e) {
    var node = lookup[this.dataset.name];
    // create a new empty child
    var child = {
      name: "new child",
      parent: node,
      children: []
    };
    // add it to the children array
    node.children.push(child);
    // add it to the lookup
    lookup[child.name] = child;
  });
}