Javascript 在JS中动态创建树/嵌套JSON

我计划使用Bootstrap Treeview，其中Json预期如下。 我需要根据各自的输入节点动态地将元素添加到“树”中

var tree = {};

tree = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1",
            nodes : [
                {
                    text : "GrandChild 3"
                }
            ]
          },
          {
            text: "Grandchild 2",
            nodes : [
                {
                    text : "GrandChild 4"
                }
            ]
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  },
  {
    text: "Parent 3"
  },
  {
    text: "Parent 4"
  },
  {
    text: "Parent 5"
  }
];

我尝试了array.reduce（），但无法实现

---

手动寻找某种方法，您可以执行以下操作：

alert(tree[0].nodes[0].nodes[0].nodes[0].text);// alerts "GrandChild 3"
// add a node array:
tree[0].nodes[0].nodes[0].nodes[0].nodes = [{
  text: "GrandChild NEW First"
}];
console.dir(tree);

显示： 数组[5]0:对象节点：数组[2]0:对象节点：数组[2]0:对象节点：数组[1]0:对象节点：数组[1]0:对象文本：“孙子新的第一个”\u原型\uuuuuuu:对象长度：1\uuuuuuu原型：数组[0]文本：“孙子3”\u原型\uuuuuuuuuuu:对象长度：1

对阵列1执行相同的操作：

数组[5] 1：对象 节点：数组[1] 正文：“家长2”

现在，您只需要代码来确定节点的深度以及在该点添加什么（节点或文本或两者）

编辑如果让它更清晰，最后添加的内容也可以这样做：

添加一个新的节点数组，然后将一个值推入该数组

tree[1].nodes = [];
tree[1].nodes.push({
  text: "GrandChild NEW Second"
});

编辑2 由于代码段编辑器的性质，下面的代码在代码段编辑器上不起作用，但为了确保代码不会从plunkr中神奇地消失，我将其包含在下面。您所需要做的就是包括jquery、引导的css文件、treeview css和treeview js文件

一些问题 这可能是因为我一生中从未使用过treeview，但如果您在treeview上打开了任何内容或选择了某些内容，则通过添加新元素，可以删除任何该操作。快速浏览它，我没有看到从当前状态简单地重建节点列表（我们的

树

变量）的方法。我试图通过使用

get[State]

命令传递一个预定义的nodeId，看看是否可以直接对父

树

变量进行更改，但是id似乎是由渲染方面生成的，并且没有继续。（为了澄清：我给了

父节点1

一个节点id为1，但当我调用了几个调用时，我得到它的节点id为0）

id约定似乎从第一个元素开始（

nodeId=0

）。然后，它首先遍历该节点的子节点（如果有），同时递增

nodeId

。从理论上讲，这将是一个足够简单的脚本，可以返回并手动枚举

节点ID

，这样您就可以进行状态更改，以便重新渲染看起来与以前一样，减去某个新附加的节点

var树=[{
文本：“父1”，
节点：[{
案文：“儿童1”，
节点：[{
文字：“孙子1号”，
节点：[{
正文：“孙子3”
}]
}, {
文字：“孙子2号”，
节点：[{
正文：“孙女4”
}]
}]
}, {
案文：“儿童2”
}]
}, {
正文：“家长2”
}, {
正文：“家长3”
}, {
正文：“家长4”
}, {
正文：“家长5”
}];
$（文档）.ready（函数（）{
$（“#测试”）.treeview({
数据：树
});
$（'button.btn primary'）。在（'click'，function（）上{
推树({
文本：“父级”+（tree.length+1）
});
$（“#测试”）.treeview({
数据：树
});
});
});

加点东西
你能准确描述一下你想做什么吗？一些例子。我正在从MongoDB下载一些JSON对象，我需要像上面那样解析和创建JSON对象，我可以在Bootstrap treeview中使用它们。由于这些值来自Mongo，因此寻找一些动态方法。您正在寻找的是一个递归函数。您是否尝试向其中添加元素？如果是这样的话，怎么画呢？画树是一个很好的解决方案&引导树视图也能做到同样的效果。我在这里寻找的是如何在对象“树”中动态添加元素，因为我从来没有使用过引导树视图，你能用你当前使用的代码设置一个plunker，以便我能最好地找到解决方案吗？我已经设置了一个plunker，我对treeview的了解非常有限，我有一个非常基本的解决方案，就是我一直在寻找的完美Jhecht。伟大的谢谢你，马克。这就是我要找的。：）
tree[1].nodes = [];
tree[1].nodes.push({
  text: "GrandChild NEW Second"
});