Javascript 画出一棵树

我需要将带有关系的平面数据呈现到javascript中的html树结构中。我需要在没有任何图书馆帮助的情况下做这件事。数据本身是扁平的：

[
{id : 1, title : one, parent : null},
{id : 2, title : two, parent : 1},
{id : 3, title : three, parent : 2},
{id : 4, title : four, parent : null},
{id : 5, title : five, parent : 4},
{id : 6, title : six, parent : 4},
{id : 7, title : seven, parent : 6},
{id : 8, title : eight, parent : 7},
{id : 9, title : nine, parent : 8}
]

这是期望的结果：

<div>one
  <div>two
    <div>three</div>
  </div>
</div>
<div>four
  <div>five</div>
  <div>six
    <div>seven
      <div>eight
        <div>nine
        </div>
      </div>
    </div>
  </div>
</div>

1
二
三
四
五
六
七
八
九

数据的深度是任意的（即，根据数据的不同，深度可以是一级或一百级）

---

我一直在寻找答案，但大多数都指向库或使用本身嵌套的数据（在大多数情况下，这只会将嵌套问题推到服务器上）。

成本为O（n）的迭代方法是

函数生成树（数据）{
变量元素=数组（data.length+1），
proto=document.createElement（'div'）；
对于（var i=0；i，这里有一个递归函数，用于将对象数组（以及您的结构）转换为
html
字符串，表示
div
标记的层次结构

function menuTree(nodes, parentId) {
    return nodes.reduce(function(html, node) {
        return html + (node.parent === parentId
            ? '\n<div>' + node.title + menuTree(nodes, node.id) + '</div>'
            : '');
    }, '');
}

下面是一个交互式演示上述内容的示例。此小提琴允许您更改
json
描述，并相应地复制
div
树。通过使用一些基本
css
，
div
树以缩进方式呈现。
我想您误解了OP的问题。谢谢您的回答，但incot是对的。我想将数据渲染成html，而不是相反。请告诉我，如果你认为我可以做些什么来让问题更清楚，以供将来的参考。@tricot你是对的，我已经用一种O（n）迭代方法修复了答案，这比你的O（n^2）；）
var nodes = [
    {"id": 1, "title": "one",   "parent": null},
    {"id": 2, "title": "two",   "parent": 1},
    {"id": 3, "title": "three", "parent": 2},
    {"id": 4, "title": "four",  "parent": null},
    {"id": 5, "title": "five",  "parent": 4},
    {"id": 6, "title": "six",   "parent": 4},
    {"id": 7, "title": "seven", "parent": 6},
    {"id": 8, "title": "eight", "parent": 7},
    {"id": 9, "title": "nine",  "parent": 8}
];
var html = menuTree(nodes, null);
console.log(html);