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
- PasearParse'ar con
JSON.parse(data)
al recibir el resultado. - Obtener los nombres de la columnas
Object.keys(data[0])
- Una vez realizado paso 1 y 2 ya puedes mostrar el resultado recorriendo con
for( .. of ..)
.
Para tal caso puedes copiar esta función JsonToTable(.. , ..)
dentro de tu done
la cual recibe un String 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 tabla = $(table)
tabla.empty()
// para agregar columnas a thead
let heads = Object.keys(data[0])
for( head of heads){
tabla.append('<th>'+head+'</th>')
}
// para agregar datos a tbody
for( row of data){
let datos = '';
for(column of heads){
datos += '<td>'+row[column]+'</td>'
}
tabla.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><tr></tr><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>
Alternativa con JqGrid
Una alternativa es usar la libreria JqGrid la cual permite crear tablas dinámicas de datos con los resultados de respuesta JSON. Mira a ejemplo en: http://www.guriddo.net/demo/bootstrap/