Skip to main content
1 de 5
Diego Mesa
  • 1.6k
  • 6
  • 10

Asumiendo que el resultado de la consulta sea el siguiente:

[
 {
  "id": "1",
  "first_name": "John",
  "last_name": "Doe"
 },
 {
  "id": "2",
  "first_name": "Jane",
  "last_name": "Foo"
 }
]

Entonces debes pasear con JSON.parse(data) al recibir el resultado, después obtener los nombres de la columnas Object.keys(data[0]) una ver realizado eso ya puedes mostrar el resultado recorriendo con for( .. of ..). Para tal puede copiar esta función JsonToTable(.. , ..) la cual recibe un Sting con los datos y el id de la tabla donde se mostrarán:

function JsonToTable(response, table){
  // paso string a json
  let data = JSON.parse(response)

  // obtengo y limpio mi tabla
  let thead = $($(table+' > thead'))
  let tbody = $($(table+' > tbody'))
  thead.empty()
  tbody.empty()

  // para agregar columnas a thead
  let heads = Object.keys(data[0])
  for( head of heads){
   thead.append('<th>'+head+'</th>')
  }
  // para agregar datos a tbody
  for( row of data){
   let datos = '';
   for(column of heads){
     datos += '<td>'+row[column]+'</td>'
   }
   tbody.append('<tr>'+datos+'</tr>')
  }
}
<textarea id="response">
[{"id": "1","first_name": "John","last_name": "Doe"},{"id": "2","first_name": "Jane","last_name": "Foo"}]
</textarea>

<table id="mytabla">
<thead><th>demo</th></thead>
<tbody><tbody>
</table>

<button onclick="JsonToTable(response.value,'#mytabla')">Consultar</button>


<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Diego Mesa
  • 1.6k
  • 6
  • 10