返回课程

从对象创建树

重要性:5

编写一个函数 createTree,它从嵌套对象创建嵌套的 ul/li 列表。

例如

let data = {
  "Fish": {
    "trout": {},
    "salmon": {}
  },

  "Tree": {
    "Huge": {
      "sequoia": {},
      "oak": {}
    },
    "Flowering": {
      "apple tree": {},
      "magnolia": {}
    }
  }
};

语法

let container = document.getElementById('container');
createTree(container, data); // creates the tree in the container

结果(树)应该如下所示

选择两种解决此任务的方法之一

  1. 创建树的 HTML,然后将其分配给 container.innerHTML
  2. 创建树节点并使用 DOM 方法附加。

如果你能做到这两点就太好了。

附注:树不应该有“额外”的元素,例如叶子上的空 <ul></ul>

为任务打开一个沙箱。

遍历对象最简单的方法是使用递归。

  1. 使用 innerHTML 的解决方案.
  2. 使用 DOM 的解决方案.