将JSON转换为HTML树

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提交的数据结构时遇到了问题,但这是一个完全正常的例子,我为自己的目的而制定了类似的目的.除了函数我也提供了数据结构,名称/分支而不是标题/文件夹.

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()