zpět k lekci

Vytvořte strom z objektu

důležitost: 5

Napište funkci vytvořStrom, která z vnořeného objektu vytvoří vnořený seznam ul/li.

Například:

let data = {
  "Ryby": {
    "pstruh": {},
    "losos": {}
  },

  "Stromy": {
    "Velké": {
      "sekvoj": {},
      "dub": {}
    },
    "Kvetoucí": {
      "jabloň": {},
      "magnólie": {}
    }
  }
};

Syntaxe:

let kontejner = document.getElementById('kontejner');
vytvořStrom(kontejner, data); // vytvoří strom v kontejneru

Výsledek (strom) by měl vypadat takto:

Zvolte si jeden ze dvou způsobů, jak tento úkol vyřešit:

  1. Vytvořte HTML kód stromu a přiřaďte jej do kontejner.innerHTML.
  2. Vytvořte uzly stromu a připojujte je DOM metodami.

Pokud dokážete obojí, bude to vynikající.

P.S. Strom by neměl obsahovat elementy „navíc“, například prázdné <ul></ul> pro listy.

Otevřít pískoviště pro úlohu.

Nejjednodušší způsob, jak procházet objektem, je používat rekurzi.

  1. Řešení pomocí innerHTML.
  2. Řešení pomocí DOMu.