0

Soy nuevo en esto de la programación web y tengo un problema a la hora de mostrar una matriz en un div HTML. Resulta que he recibido un objeto JSON con datos de una consulta a la BD. Quiero mostrar estos datos en un div pero al recorrer la matriz solo se muestran los datos de la última fila. ¿Cómo podría hacerlo para que se muestre todo el contenido dentro de ese div?. Adjunto código

success: function(retornoArray){
 var arrayPartido = retornoArray;
 for(var i=0; i<arrayPartido.length;i++){
    for(var j=0; j<arrayPartido.length;j++){
       $('#partidoEncontrado').html(
        '<table class="table">'+
         '<tr><td>'+arrayPartido[i,j].nivel_partido+'</td><td style="text-align:right;"> Disponible </td></tr>'+
         '<tr><td>'+arrayPartido[i,j].espacio_deportivo+'</td></tr>'+
         '<tr><td>'+arrayPartido[i,j].direccion+'</td></tr>'+
         '<tr><td>'+arrayPartido[i,j].fecha+'</td><td>'+arrayPartido[i,j].hora+'</td></tr>'+
         '<tr><td> Partido creado por: '+arrayPartido[i,j].usuario+'</td></tr>'+
        '</table>');
       }
     }
   }

1 respuesta 1

0

Al usar el método html en cada iteracción reemplazas el contenido. Además de eso, no tiene sentido meter la etiqueta <table> cada vez dentro del bucle.

Cuando trabajas con bucles, es mejor recoger todo en una variable y luego actualizas el DOM una sola vez, pues actualizar elementos del DOM dentro de bucles es mucho más costoso.

Podemos usar una variable y aprovechamos para no repetir la etiqueta <table> cada vez:

success: function(retornoArray){
 var arrayPartido = retornoArray;
 var mHTML='<table class="table">';
 for(var i=0; i<arrayPartido.length;i++){
    for(var j=0; j<arrayPartido.length;j++){
        mHTML+=
         '<tr><td>'+arrayPartido[i,j].nivel_partido+'</td><td style="text-align:right;"> Disponible </td></tr>'+
         '<tr><td>'+arrayPartido[i,j].espacio_deportivo+'</td></tr>'+
         '<tr><td>'+arrayPartido[i,j].direccion+'</td></tr>'+
         '<tr><td>'+arrayPartido[i,j].fecha+'</td><td>'+arrayPartido[i,j].hora+'</td></tr>'+
         '<tr><td> Partido creado por: '+arrayPartido[i,j].usuario+'</td></tr>';
       }
     }
   /* 
     Cerramos </table> y actualizamos una sola vez el DOM
     Si el elemento tiene más cosas, en vez de html
     usa append, aquí he asumido que es un elemento vacío
   */
   mHTML+='</table>';
   $('#partidoEncontrado').html(mHTML);
 }

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.