Question

我想从下面的JSON示例生成一个HTML树（最好是UL-LI）。有没有人能够处理这种特定结构的简单，递归JS函数（不是框架）？谢谢你的帮助！

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

Answer 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;
}

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

干杯，

Answer 2

我在浏览器接受OP提交的数据结构时遇到了问题，但这是一个完全正常的例子，我为自己的目的而制定了类似的目的。除了函数我也提供数据结构，使用名称/分支而不是标题/文件夹。

<html>
<head>
<script>
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));
}
</script>
</head>

<body onload="renderTree()">
<div id="tree"></div>
</body>

</html>

Answer 3

我过去曾使用PURE取得了一些成功。

Answer 4

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

http://json2html.com

Answer 5

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;
}

Answer 6

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

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));
    }
}

将JSON转换为HTML树

6 个答案: