JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div id="tree">

</div>

JavaScript

// Crear un objeto JSON con algunos datos
var data = {
  name: "root",
  children: [
    {
      name: "child1",
      children: [
        {
          name: "grandchild1"
        },
        {
          name: "grandchild2"
        }
      ]
    },
    {
      name: "child2",
      children: [
        {
          name: "grandchild3"
        }
      ]
    }
  ]
};

// Crear una función que convierte un objeto JSON en una lista HTML
function jsonToHtml(json) {
  // Crear un elemento ul
  var ul = document.createElement("ul");
  // Recorrer las propiedades del objeto JSON
  for (var key in json) {
    // Crear un elemento li
    var li = document.createElement("li");
    // Si la propiedad es un array, llamar a la función recursivamente
    if (Array.isArray(json[key])) {
      li.textContent = key + ":";
      li.appendChild(jsonToHtml(json[key]));
    } else {
      // Si la propiedad es un objeto, llamar a la función recursivamente
      if (typeof json[key] === "object") {
        li.textContent = key + ":";
        li.appendChild(jsonToHtml(json[key]));
      } else {
        // Si la propiedad es un valor, mostrarlo
        li.textContent = key + ": " + json[key];
      }
    }
    // Añadir el elemento li al elemento ul
    ul.appendChild(li);
  }
  // Devolver el elemento ul
  return ul;
}

// Obtener el elemento div donde se va a mostrar el árbol
var div = document.getElementById("tree");

// Llamar a la función jsonToHtml con el objeto JSON y añadir el resultado al div
div.appendChild(jsonToHtml(data));