将 JSON 转换为 HTML 树答案

【问题标题】：Convert JSON to HTML Tree将 JSON 转换为 HTML 树
【发布时间】：2009-07-04 20:29:45
【问题描述】：

我想从下面的 JSON 示例生成一个 HTML 树（最好是 UL-LI）。有没有人有一个 simple 的递归 JS 函数（不是框架）可以处理这个特定的结构？感谢您的帮助！

{ "folder" : [ {
    "title" : "1",
    "folder" : [ {
        "title" : "1.1",
        "folder" : [ {
            "title" : "1.1.1",
        } , {
            "title" : "1.1.2",
        } ]
    } ]
} , {
    "title" : "2",
} ] }

【问题讨论】：

标签： javascript json

【解决方案1】：

function to_ul (obj) {
  // --------v create an <ul> element
  var f, li, ul = document.createElement ("ul");
  // --v loop through its children
  for (f = 0; f < obj.folder.length; f++) {
    li = document.createElement ("li");
    li.appendChild (document.createTextNode (obj.folder[f].title));
    // if the child has a 'folder' prop on its own, call me again
    if (obj.folder[f].folder) {
      li.appendChild (to_ul (obj.folder[f].folder));
    }
    ul.appendChild (li);
  }
  return ul;
}

警告：没有错误检查！如果缺少“标题”或“文件夹”，整个事情可能会爆炸。

【讨论】：

它也缺少将 li 添加到 ul 中。在 for 循环关闭之前添加一个 ul.appendChild(li) ，它应该可以工作。
有效性也有问题：UL的标题只是附加在它上面。这是不太有用的东西。
你不是在每一个递归实例中都传递一个新的ul 吗？你不需要附加所有这些最初传入的根obj吗？？
您不是在每个递归实例上都传递一个全新的ul 吗？您不需要将所有内容附加到相同的ul??
这个想法是有一个树状结构，即嵌套 JSON 结构的嵌套 uls。因此，每次下降到下一个级别都需要一个新的ul。 “更深”的uls 被附加到lis，然后它们本身被附加到ul 上一级。

【解决方案2】：

我在让浏览器接受 OP 提交的数据结构时遇到问题，但这是我为自己的类似目的起草的一个完整的工作示例。除了函数之外，我还提供了数据结构，使用名称/分支而不是标题/文件夹。

function to_ul(branches) {
  var ul = document.createElement("ul");

  for (var i = 0, n = branches.length; i < n; i++) {
    var branch = branches[i];
    var li = document.createElement("li");

    var text = document.createTextNode(branch.name);
    li.appendChild(text);

    if (branch.branches) {
      li.appendChild(to_ul(branch.branches));
    }

    ul.appendChild(li);
  }

  return ul;
}

function renderTree() {
  var treeEl = document.getElementById("tree");

  var treeObj = {
    "root": [{
      "name": "George & Sarah Trede",
      "branches": [{
        "name": "George & Frances Trede",
        "branches": [{
          "name": "Mary (Trede) Jempty"
        }, {
          "name": "Carol (Trede) Moeller"
        }]
      }, {
        "name": "Mary (Trede) Sheehan"
      }, {
        "name": "Ward Trede"
      }]
    }]
  };

  treeEl.appendChild(to_ul(treeObj.root));
}

renderTree()

&lt;div id="tree"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

我过去曾使用PURE 来处理这类事情并取得了一些成功。

【讨论】：

【解决方案4】：

function to_li(obj, name) {
    var li = document.createElement("li");
    if (typeof(name) != "undefined") {
        var strong = document.createElement("strong");
        strong.appendChild(document.createTextNode(name + ": "));
        li.appendChild(strong);
    }
    if (typeof(obj) != "object"){
        li.appendChild(document.createTextNode(obj));
    } else {
        var ul = document.createElement ("ul");
        for (var prop in obj){
            ul.appendChild(to_li(obj[prop],prop));
        }
        li.appendChild(ul);
    }
    return li;
}

【讨论】：

【解决方案5】：

查看 jquery 插件 JSON2HTML，它比 PURE 使用起来更简单一些，我已经在我创建的几个网站上使用了它。

http://json2html.com

【讨论】：

【解决方案6】：

@Boldewyn：我相信您也可以使用 For...In 循环而不是常规的 For 循环来稍微缩短代码。当然，我没有太多使用这种循环的经验，所以请检查我的代码sn-p。

for (var i in obj.folder) {
    li = document.createElement ("li");
    li.appendChild (document.createTextNode (i.title));
    // if the child has a 'folder' prop on its own, call me again
    if (i.folder) {
      li.appendChild (to_ul (i.folder));
    }
}

【讨论】：

不行，又拿出来了。 i 将包含范围 0..n 而不是数组项。

【解决方案7】：

我已经为它制作了一个 pip 包，请查看JSON2tree。使用pip install json2tree 安装它，然后使用 cli 工具创建 HTML 树。 json2tree -j example.json -o output.html

【讨论】：