Skip to main content
se añadieron 2 caracteres en el cuerpo
Origen Enlace
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

  1. PasearParse'ar con JSON.parse(data) al recibir el resultado.
  2. Obtener los nombres de la columnas Object.keys(data[0])
  3. 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/

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

  1. Pasear con JSON.parse(data) al recibir el resultado.
  2. Obtener los nombres de la columnas Object.keys(data[0])
  3. 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/

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

  1. Parse'ar con JSON.parse(data) al recibir el resultado.
  2. Obtener los nombres de la columnas Object.keys(data[0])
  3. 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/

Reducida complejidad de codigo
Origen Enlace
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

  1. Pasear con JSON.parse(data) al recibir el resultado.
  2. Obtener los nombres de la columnas Object.keys(data[0])
  3. 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)
  let thead = $($(table+' > thead'))
  thead.empty()
  tabla.empty()

  // para agregar columnas a thead
  let heads = Object.keys(data[0])
 
  for( head of heads){
   theadtabla.append('<th>'+head+'</th>')
  }
  // para agregar datos a tbody
  for( row of data){
   let datos = '';
   for(column of heads){
     datos += '<td>'+row[column]+'</td>'
   }
   $(table)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/

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

  1. Pasear con JSON.parse(data) al recibir el resultado.
  2. Obtener los nombres de la columnas Object.keys(data[0])
  3. 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)
  let thead = $($(table+' > thead'))
  thead.empty()
  tabla.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>'
   }
   $(table).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/

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

  1. Pasear con JSON.parse(data) al recibir el resultado.
  2. Obtener los nombres de la columnas Object.keys(data[0])
  3. 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/

se añadieron 64 caracteres en el cuerpo
Origen Enlace
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

  1. Pasear con JSON.parse(data) al recibir el resultado.
  2. Obtener los nombres de la columnas Object.keys(data[0])
  3. 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 theadtabla = $($(table+' > thead')table)
  let tbodythead = $($(table+' > tbody'thead'))
  thead.empty()
  tbodytabla.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$(table).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><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/

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

  1. Pasear con JSON.parse(data) al recibir el resultado.
  2. Obtener los nombres de la columnas Object.keys(data[0])
  3. 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 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>

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/

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

  1. Pasear con JSON.parse(data) al recibir el resultado.
  2. Obtener los nombres de la columnas Object.keys(data[0])
  3. 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)
  let thead = $($(table+' > thead'))
  thead.empty()
  tabla.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>'
   }
   $(table).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/

se añadieron 271 caracteres en el cuerpo
Origen Enlace
Diego Mesa
  • 1.6k
  • 6
  • 10
Loading
Origen Enlace
Diego Mesa
  • 1.6k
  • 6
  • 10
Loading