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>