Create a tree from the object

Write a function createTree that creates a nested ul/li list from the nested object.

For instance:

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

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

The syntax:

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

The result (tree) should look like this:

[iframe border=1 src="build-tree-dom"]

Choose one of two ways of solving this task:

Create the HTML for the tree and then assign to container.innerHTML.
Create tree nodes and append with DOM methods.

Would be great if you could do both.

P.S. The tree should not have "extra" elements like empty <ul></ul> for the leaves.

907 B Raw Blame History

Create a tree from the object

907 B

Raw Blame History