Playing with the dom

let cours = {
  "Math": {
    "Algébre": {},
    "géométrie": {}
  },

  "Langue": {
    "vivante": {
      "anglais": {},
      "russe": {}
    },
    "morte": {
      "latin": {},
    }
  }
};

Peut être parcouru pour afficher !

• Math
  • Algébre
  • géométrie
• Langue
• vivante
  • anglais
  • russe
• morte
• latin

 <ul>

    <li>Math

      <ul>

        <li>Algébre</li>

        <li>géométrie</li>

      </ul>

    </li>

    <li>Langue

      <ul>

        <li>vivante

          <ul>

            <li>anglais</li>

            <li>russe</li>

          </ul>

        </li>

        <li>morte

          <ul>

            <li>latin</li>

          </ul>

        </li>

      </ul>

    </li>

  </ul>

function afficheTree(container, node) {
  let ul;

  if (Object.keys(node).length) {
    ul = document.createElement("ul");
    container.append(ul);
  }

  Object.entries(node).forEach(([clé, obj]) => {
    let li = document.createElement("li");
    li.append(document.createTextNode(clé));
    ul.append(li);

    if (Object.keys(obj).length) {
      afficheTree(li, obj)
    }
  })

}



afficheTree(document.getElementById('tree'), cours);