retour au cours

Créer un arbre à partir de l'objet

importance: 5

Écrivez une fonction createTree qui crée une liste imbriquée ul/li à partir de l’objet imbriqué.

Par exemple :

let data = { "Fish": { "trout": {}, "salmon": {} }, "Tree": { "Huge": { "sequoia": {}, "oak": {} }, "Flowering": { "apple tree": {}, "magnolia": {} } } };

La syntaxe :

let container = document.getElementById('container'); createTree(container, data); // crée l'arbre dans le conteneur

Le résultat (arbre) devrait ressembler à ceci :

Choisissez l’une des deux façons de résoudre cette tâche :

  1. Créez le code HTML de l’arborescence, puis attribuez-le à container.innerHTML.
  2. Créez des nœuds d’arbre et ajoutez-les avec les méthodes DOM.

Ce serait génial si vous pouviez faire les deux.

P.S. L’arbre ne doit pas avoir d’éléments “supplémentaires” comme des <ul></ul> vides pour les feuilles (de l’arbre).

Open a sandbox for the task.

La façon la plus simple de parcourir l’objet est d’utiliser la récursivité.

  1. La solution avec innerHTML.
  2. La solution avec DOM.