Skip to main content
mejoras de formato
Origen Enlace
Kleith
  • 3.8k
  • 2
  • 16
  • 28
// 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'"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") {
      returnrow = row.concat(getRows(json[key], _index + 1));
    }
  }
  return row;
}
// 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'"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") {
      returnrow = row.concat(getRows(json[key], _index + 1));
    }
  }
  return row;
}

var json = {
  PersonaHeaderJson: {
    Sistema: { codigo: "00001", nombre: "Juan""APP", lang: "es" },
    edadTraza: 28,{
    Residencia  timestamp: {"2017-12-14T16:11:01.282Z",
      calletrazaID: "example""ASDA2232134124ASDS",
      numeroServicio: "0123"{ nombre: "Orden", operacion: "Obtener" }
    }
  },
  BodyJson: { Orden: { ordenID: "1232132134" } }
};
var table = document.querySelector('table'"table");
var rows = getRows(json);

// armo los tr y td para la tabla

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

var thExample = document.createElement('th'"th");
thExample.appendChild(document.createTextNode('Ejemplo'"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'"tr");
  
  for (var j = 0; j <= tdLength; j++) {
    var td = document.createElement('td'"td");
    var text = document.createTextNode(
      rows[i]._index === j ? rows[i].param : ''""
    );
    td.appendChild(text);
    tr.appendChild(td);
  }
  
  var tdTipo = document.createElement('td'"td");
  tdTipo.appendChild(document.createTextNode(rows[i].type));
  tr.appendChild(tdTipo);
  
  var tdExample = document.createElement('td'"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>
// 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") {
      return row.concat(getRows(json[key], _index + 1));
    }
  }
  return row;
}
// 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") {
      return row.concat(getRows(json[key], _index + 1));
    }
  }
  return row;
}

var json = {
  Persona: {
    nombre: "Juan",
    edad: 28,
    Residencia: {
      calle: "example",
      numero: "0123"
    }
  }
};
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 = rows[rows.length - 1]._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>
// 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;
}
// 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>
Origen Enlace
Kleith
  • 3.8k
  • 2
  • 16
  • 28

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") {
      return 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") {
      return row.concat(getRows(json[key], _index + 1));
    }
  }
  return row;
}

var json = {
  Persona: {
    nombre: "Juan",
    edad: 28,
    Residencia: {
      calle: "example",
      numero: "0123"
    }
  }
};
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 = rows[rows.length - 1]._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.