JSFiddle - React, Tailwind, and code Playground

by DupontTD

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <pre>
 let cours = {
  "Math": {
    "Algébre": {},
    "géométrie": {}
  },

  "Langue": {
    "vivante": {
      "anglais": {},
      "russe": {}
    },
    "morte": {
      "latin": {},
    }
  }
};
</pre>
  <div id="tree"></div>
</body>
</html>

JavaScript

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

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

let data2 = {
  "Fish": {
    "trout": {},
    "salmon": {}
  }

};

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);