Дерево из объекта(DOM)

by Artem

HTML

<div id="container"></div>

JavaScript

'use strict';

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

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

function createTree(container, data) {
  const keys = Object.keys(data);
  let list = document.createElement('ul');
  

  keys.forEach((key) => {
    let item = document.createElement('li');
    item.appendChild(document.createTextNode(key));
    list.appendChild(item);
    
    if (Object.keys(data[key]).length > 0) {
      list.appendChild(createTree(list, data[key]));
    }
  });

  if ({}.toString.call(container) === '[object HTMLUListElement]') {
    return list;
  } else {
    container.appendChild(list);
  }
}