3

Estoy intentado crear una tabla mediante un archivo tipo JSON.

Lo que busco es crear la tabla en base a la estructura del JSON, por ejemplo, tengo el siguiente JSON:

{
   "Persona":{
      "nombre":"Juan",
      "edad":28,
      "Residencia":{
         "calle":"example",
         "numero":"0123"
      }
   }
}

Lo que necesito es lo siguiente:

introducir la descripción de la imagen aquí

¿Es posible crear esta tabla de tipo HTML o algo parecido automáticamente mediante java, jquery, javascript o algún otro tipo de lenguaje?

2
  • estas programando el backend en java? o por que mencionas java?
    – user75901
    Commented el 21 may. 2018 a las 1:51
  • Si, estoy programando el backend en java. Ademas, generalmente lo que utilizo para programar es Java, si existe una solución para esta pregunta utilizando este lenguaje seria lo mejor.
    – Marmota
    Commented el 21 may. 2018 a las 1:57

1 respuesta 1

4

Con javascript podrías crearlo, te dejo a continuación la función que cree documentado en cada línea para que puedas entenderlo:

// función para obtener las columnas en un objeto
function getRows(json, index) {
  var _index = index | 0;
  var row = [];

  // recorro el json por key
  for (key in json) {
    // agrego los textos correspondientes
    row.push({
      param: key,
      type: typeof json[key],
      example: typeof json[key] !== "object" ? json[key] : "",
      // esto es para saber la posición de los td
      _index: _index
    });

    // si es un objeto entonces lo recorro
    if (typeof json[key] === "object") {
      row = row.concat(getRows(json[key], _index + 1));
    }
  }
  return row;
}

Y acá te dejo el código completo para que puedas visualizarlo.

// función para obtener las columnas en un objeto
function getRows(json, index) {
  var _index = index | 0;
  var row = [];

  // recorro el json por key
  for (key in json) {
    // agrego los textos correspondientes
    row.push({
      param: key,
      type: typeof json[key],
      example: typeof json[key] !== "object" ? json[key] : "",
      // esto es para saber la posición de los td
      _index: _index
    });

    // si es un objeto entonces lo recorro
    if (typeof json[key] === "object") {
      row = row.concat(getRows(json[key], _index + 1));
    }
  }
  return row;
}

var json = {
  HeaderJson: {
    Sistema: { codigo: "00001", nombre: "APP", lang: "es" },
    Traza: {
      timestamp: "2017-12-14T16:11:01.282Z",
      trazaID: "ASDA2232134124ASDS",
      Servicio: { nombre: "Orden", operacion: "Obtener" }
    }
  },
  BodyJson: { Orden: { ordenID: "1232132134" } }
};
var table = document.querySelector("table");
var rows = getRows(json);

// armo los tr y td para la tabla

// armo el header de la tabla
var tr = document.createElement("tr");
var tdLength = Math.max.apply(
  Math,
  rows.map(function(object) {
    return object._index;
  })
);
for (var i = 0; i <= tdLength; i++) {
  var th = document.createElement("th");
  var text = document.createTextNode(rows[i]._index === 0 ? "Parametro" : "");
  th.appendChild(text);
  tr.appendChild(th);
}
var thTipo = document.createElement("th");
thTipo.appendChild(document.createTextNode("Tipo"));
tr.appendChild(thTipo);

var thExample = document.createElement("th");
thExample.appendChild(document.createTextNode("Ejemplo"));
tr.appendChild(thExample);
table.appendChild(tr);

// recorro todos las columnas del objeto
for (var i = 0; i < rows.length; i++) {
  var tr = document.createElement("tr");

  for (var j = 0; j <= tdLength; j++) {
    var td = document.createElement("td");
    var text = document.createTextNode(
      rows[i]._index === j ? rows[i].param : ""
    );
    td.appendChild(text);
    tr.appendChild(td);
  }

  var tdTipo = document.createElement("td");
  tdTipo.appendChild(document.createTextNode(rows[i].type));
  tr.appendChild(tdTipo);

  var tdExample = document.createElement("td");
  tdExample.appendChild(document.createTextNode(rows[i].example));
  tr.appendChild(tdExample);

  table.appendChild(tr);
}
table {
  border-collapse: collapse;
}

tr {
  padding: 0;
  margin: 0;
}

td, th {
  border: 1px solid #000;
  padding: 2px 5px;
}

th {
  font-size: 13px;
  font-family: tahoma;
  text-align: left;
}

tr td {
  font-family: monospace;
  font-size: 13px;
}
<div id="container">
  <table></table>
</div>

También lo dejé en codepen para que puedas cambiar el json y probarlo.

6
  • Excelente Kleith!! Muchas gracias por la respuesta, es exactamente lo que busco. Sin embargo, me surgió otra duda, tengo un JSON con una estructura mucho mas avanzada (diferentes tipos de profundidad, arrays, muchos mas objects, etc). Ahora, la idea de la aplicación que estoy construyendo es tomar un JSON X y poder transformarlo a una tabla automáticamente. ¿Es posible? ¿Donde tengo que poner énfasis en el código que me proporcionaste?
    – Marmota
    Commented el 21 may. 2018 a las 14:56
  • Si si, está preparado para eso, de hecho si vas al lik de codepen y cambiás el json por otro más complejo, deberías poder visualizarlo.
    – Kleith
    Commented el 21 may. 2018 a las 14:59
  • Estimado Kleith, estuve probando el siguiente JSON en codepen y solo muestra los primeros objetos. { "HeaderJson": { "Sistema": { "codigo": "00001", "nombre": "APP", "lang": "es" }, "Traza": { "timestamp": "2017-12-14T16:11:01.282Z", "trazaID":"ASDA2232134124ASDS", "Servicio": { "nombre": "Orden", "operacion": "Obtener" } } }, "BodyJson": { "Orden": { "ordenID": "1232132134" } } } ¿Puede que este haciendo algo mal?
    – Marmota
    Commented el 21 may. 2018 a las 15:27
  • Lo reviso y más tarde modifico la respuesta. Pero si, no me funcionó con ese json.
    – Kleith
    Commented el 21 may. 2018 a las 15:37
  • Listo @Marmota, tenía un error al concatenar los array, ahora si funciona.
    – Kleith
    Commented el 21 may. 2018 a las 17:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.