1

¿Como puedo imprimir el resultado de una respuesta de ajax en una tabla desde javascript?

Actualmente lo imprimo mediante un label dentro de la tabla, lo ideal seria que se formen las filas y no solo una columna con todos los resultados de la respuesta.

Mi código de js:

  function mostrarContenidoJson(){
  var aNombre=[];
  var aCorreo=[];
   if(LaPeticion.readyState==4){ 
     if(LaPeticion.status==200){  
         var respuestaAjax=JSON.parse(LaPeticion.responseText); 
          for(var i=0; i<respuestaAjax.length; i++){
             aNombre.push(respuestaAjax[i].Nombre);
             aCorreo.push(respuestaAjax[i].Email);
             document.getElementById("Nombre").innerHTML = 
           aNombre.join(</br>");
            document.getElementById("Email").innerHTML = 
           aCorreo.join("/br>");
            }//Cierra for
          }else{
             alert("Error al leer la el material bibliografico");
        }
   }
}

introducir la descripción de la imagen aquí

0

1 respuesta 1

0

tu codigo no me termina de convencer ¿Por que existen los array aNombre y aCorreo? si te das cuentas en tu for lo que estas haciendo es pushear un nuevo elemento a cada array (aNombre.push y aCorreo.push), luego sobre-escribes el contenido de los elementos HTML con id "Nombre" e "Email" en cada iteración, es decir para cada par nombre, email que llega desde tu consulta AJAX estas eliminando el contenido y volviendo a escribir.

Esta es la estructura basica de una tabla:

 <table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 

Fuente: https://www.w3schools.com/html/html_tables.asp

Como puedes darte cuenta las filas de la tabla son asi:

  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>

Esto significa que cada fila de tu tabla debe estar dentro de una etiqueta <tr> separando cada campo con una etiqueta <td> en tu ejemplo, cada fila tiene 2 campos, nombre y correo electrónico.

Sin ver tu HTML se hace un poco complicado pero te daré una posible solución, esta es tu tabla:

 <table id="mytabla">
  <tr>
    <th>Nombre</th>
    <th>Correo Electronico</th>
  </tr>
 </table>

luego en tu codigo JS, en la parte del for:

let tabla = document.getElementById("mytabla");

for(var i=0; i<respuestaAjax.length; i++){
    let fila = "<tr><td>"+respuestaAjax[i].Nombre+"</td><td>"+respuestaAjax[i].Email+"</td></tr>
    tabla.innerHTML += fila;
}//Cierra for

Lo que hago aquí básicamente es:

  1. Guardo una referencia a mytabla en la variable "tabla"
  2. Para cada elemento de "respuestaAjax" creamos una fila para la tabla (con la estructura que te mostre anteriormente)
  3. Agregamos esta fila al HTML, fijate que no utilizo = utilizo += con lo que estoy agregando la fila al final del contenido HTML de la tabla, no estoy sobre escribiendo nada.

recuerda que trabajamos como si el HTML fuera texto plano por lo que técnicamente lo que estamos haciendo se denomina "concatenación de cadenas"

1
  • 1
    Muchas gracias, me ha servido. :)
    – user87903
    Commented el 23 may. 2018 a las 15:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.