Is it possible to create an HTML table using the structure of a JSON?

Question

Is it possible to create an HTML table using the structure of a JSON?

Navigation

#1 by (4 votes)

3

I'm trying to create a table using a JSON file.

What I'm looking for is to create the table based on the structure of the JSON, for example, I have the following JSON:

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

What I need is the following:

Is it possible to create this HTML type table or something similar automatically using java, jquery, javascript or some other kind of language?

java javascript jquery json html-tabla

asked by Marmota 21.05.2018 в 03:50

source

1 answer

Favorites android studio without database Problem when trying to execute the sudo apt-get update command

score 4 · Accepted Answer

With javascript you could create it, I leave you below the function that you create documented in each line so you can understand it:

// 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;
}

And here I leave the complete code so you can visualize it.

// 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>

I also left it at codepen so you can change the json and try it.