Вернуться к уроку

Создайте дерево из объекта

важность: 5

Напишите функцию, которая создаёт вложенный список UL/LI (дерево) из объекта.

Например:

var data = {
  "Рыбы": {
    "Форель": {},
    "Щука": {}
  },

  "Деревья": {
    "Хвойные": {
      "Лиственница": {},
      "Ель": {}
    },
    "Цветковые": {
      "Берёза": {},
      "Тополь": {}
    }
  }
};

Синтаксис:

var container = document.getElementById('container');
createTree(container, data); // создаёт

Результат (дерево):

Выберите один из двух способов решения этой задачи:

  1. Создать строку, а затем присвоить через container.innerHTML.
  2. Создавать узлы через методы DOM.

Если получится – сделайте оба.

P.S. Желательно, чтобы в дереве не было лишних элементов, в частности – пустых <ul></ul> на нижнем уровне.

Открыть песочницу для задачи.

Решения через рекурсию.

  1. Через innerHTML.
  2. Через DOM.