Javascript 从json动态构建dom树_Javascript_Jquery_Json

Javascript 从json动态构建dom树

javascript jquery json

Javascript 从json动态构建dom树,javascript,jquery,json,Javascript,Jquery,Json,这是我的JSON数据。我需要构建一个dom，其中节点构建在其子节点中。我能够为没有子节点的节点构建dom。任何关于如何使用包含在父级中的子级构建dom树的指针都将不胜感激 { "widgetData":[ { "label":"node1", "color":"red", "children":[ { "label

这是我的JSON数据。我需要构建一个dom，其中节点构建在其子节点中。我能够为没有子节点的节点构建dom。任何关于如何使用包含在父级中的子级构建dom树的指针都将不胜感激

 {
       "widgetData":[
          {
             "label":"node1",
             "color":"red",
             "children":[
                {
                   "label":"vip1",
                   "color":"red",
                   "children":[
                      {
                         "label":"obj1",
                         "color":"gray",
                         "id":"539803eae4b0ffad82491508"
                      },
                      {
                         "label":"obj2",
                         "color":"green",
                         "id":"5395635ee4b071f136e4b691"
                      },
                      {
                         "label":"obj3",
                         "color":"green",
                         "id":"539803e4e4b0ffad82491507"
                      }
                   ],
                   "id":"53956358e4b071f136e4b690"
                },
                {
                   "label":"vip2",
                   "color":"blue",
                   "id":"539803f2e4b0ffad82491509"
                }
             ],
             "id":"5395634ee4b071f136e4b68e"
          },
          {
             "label":"node2",
             "children":[
                {
                   "label":"vip1",
                   "color":"green",
                   "id":"539803eae4b0ffad82491501"
                },
                {
                   "label":"vip2",
                   "color":"green",
                   "id":"5395635ee4b071f136e4b694"
                }
             ],
             "id":"5395637fe4b071f136e4b692"
          },
          {
             "label":"node3",
             "color":"red",
             "children":[

             ],
             "id":"53956371f136e4b692"
          },
          {
             "label":"node4",
             "color":"red",
             "children":[

             ],
             "id":"5656"
          },
          {
             "label":"node5",
             "color":"red",
             "children":[
             ],
             "id":"5395637fe4b071f13b692"
          }
       ]
    }

我尝试过的javascript代码

for (var i = 0; i <jsonData.length; i++) {
                    var $divParent  = $("<div></div>");
                    $divParent.text(jsonData[i].label).attr('id',jsonData[i].id);
                    if (jsonData[i].children.length >0 ) {


                    }
                    else {
                        container.append($divParent);
                    }
                }

for（变量i=0；i 0）{
}
否则{
container.append（$divParent）；
}
}

容器是DIV元素

我需要一个解决方案，让我的孩子们的深度可以增加

像这样的

for (var i = 0; i < jsonData.length; i++) {
    // Create parent
    var $divParent  = getHtml(jsonData[i]);

    $divParent.text(jsonData[i].label).attr('id',jsonData[i].id);

    // Check if JSON element has "children" property which is an array and has elements
    if (jsonData[i].children && jsonData[i].children.constructor === Array && jsonData[i].children.length) {
        for (var c = 0; c < jsonData[i].children.length; c++) {
            // Generate child HTML and append to parent
            var childHtml = getHtml(jsonData.children[c]);
            $divParent.Html($divParent.Html() + childHtml);
        }
    }

    container.append($divParent);
}

function getHtml(jsonObject) {
    var $div = $("<div></div>");
    $div.text(jsonObject.label).attr('id', jsonObject.id);
    return $div;
}

for（var i=0；i

像这样的东西
for (var i = 0; i < jsonData.length; i++) {
    // Create parent
    var $divParent  = getHtml(jsonData[i]);

    $divParent.text(jsonData[i].label).attr('id',jsonData[i].id);

    // Check if JSON element has "children" property which is an array and has elements
    if (jsonData[i].children && jsonData[i].children.constructor === Array && jsonData[i].children.length) {
        for (var c = 0; c < jsonData[i].children.length; c++) {
            // Generate child HTML and append to parent
            var childHtml = getHtml(jsonData.children[c]);
            $divParent.Html($divParent.Html() + childHtml);
        }
    }

    container.append($divParent);
}

function getHtml(jsonObject) {
    var $div = $("<div></div>");
    $div.text(jsonObject.label).attr('id', jsonObject.id);
    return $div;
}

for（var i=0；i
调用函数以递归方式追加子项，如下所示：
function appendChildren(parentEl, children) {
      for (var i = 0; i < children.length; i++) {
        var child = children[i],
            element = $('<div />');
        element.text(child.label).attr(child.id);
        appendChildren(element, child.children);
        parentEl.append(element);
      }
    }

var root = $('body');
appendChildren(root, jsonData);

函数附加子对象（父对象，子对象）{
对于（变量i=0；i
调用函数以递归方式追加子项，如下所示：
function appendChildren(parentEl, children) {
      for (var i = 0; i < children.length; i++) {
        var child = children[i],
            element = $('<div />');
        element.text(child.label).attr(child.id);
        appendChildren(element, child.children);
        parentEl.append(element);
      }
    }

var root = $('body');
appendChildren(root, jsonData);

函数附加子对象（父对象，子对象）{
对于（变量i=0；i
你差一点就搞定了。您需要的是递归：
function appendDom(container, jsonData) {
    for (var i = 0; i <jsonData.length; i++) {
        var $divParent  = $("<div></div>");
        $divParent.text(jsonData[i].label).attr('id',jsonData[i].id);
        if (jsonData[i].children) {
            appendDom($divParent, jsonData[i].children);
        }
        container.append($divParent);
    }
}

函数appendDom（容器，jsonData）{
对于（var i=0；i您几乎成功了。您需要的是递归：
function appendDom(container, jsonData) {
    for (var i = 0; i <jsonData.length; i++) {
        var $divParent  = $("<div></div>");
        $divParent.text(jsonData[i].label).attr('id',jsonData[i].id);
        if (jsonData[i].children) {
            appendDom($divParent, jsonData[i].children);
        }
        container.append($divParent);
    }
}

函数appendDom（容器，jsonData）{
对于（var i=0；i，您可能需要创建如下属性值函数映射：

然后，您可以创建一个初始值设定项函数：

您可能需要创建如下属性值函数映射：

然后，您可以创建一个初始值设定项函数：

我在尝试使用递归jsonData[I]时出错。儿童是未定义的，我稍微更改了代码：我添加了测试Hey@Maurice你能告诉我你所做的更改是什么吗？因为我在发布问题之前几乎尝试了相同的更改。我也遇到了相同的错误。如果知道我的错误，我会很高兴我添加了测试，如果（jsonData[i].children）{i之前检查并调用了if（jsonData[i].children.length>0）中的函数{}，但仍然出错。Thank mate解决了这个问题。我在尝试使用递归jsonData[i]时出错.children是未定义的，我稍微更改了代码：我添加了测试Hey@Maurice你能告诉我你做了什么更改吗？因为我在发布问题之前几乎尝试了相同的更改。我得到了相同的错误。如果我添加了测试if（jsonData[I].children），我会很高兴知道我的错误{我之前检查并调用了if（jsonData[i].children.length>0）中的函数{}，但仍然出现错误。感谢mate解决了这个问题。