1

hago la siguiente consulta ajax:

$.ajax({
                    url: '',
                    type: 'GET',
                    data: '',
                    success: function(response){ 
                        if (response == 1){
                            nom= [];
                        }
                        else{
                            nom = JSON.parse(response)
                            // console.log('Esto es la respuesta :'+nom)
                            for (var p = 0; p<nom.length; p++){
                                // console.log(nom[p].nombre)
                                text = nom[p].nombre 
                                console.log(text)
                                $('#textoP').html(text)
                            }
                        } 
                    }    
                });

Me devuelve dos nombres, que quiero insertar en la tabla temporal como filas y mostrar sus datos. Entonces quiero que me genere la tabla tantas filas como nombres tenga en este caso solo me genera el primer nombre:

 fila2 += '<th id="textoP" style=" font-size: 0.9em;text-align: center;border: 1px solid #dddddd;"></th>'

2
  • podes usar mejor map() en reemplazo del for. te quedaría algo así nom.map(item => {text = item.nombre})
    – Roy
    Commented el 19 oct. 2022 a las 12:21
  • Por favor edita la pregunta pulsando en editar y coloca lo que pusiste en comentarios en mi respuesta o bien pon cómo tienes el código ahora. En comentarios no se puede apreciar todo el contexto.
    – A. Cedano
    Commented el 20 oct. 2022 a las 10:05

1 respuesta 1

0

Tu problema está en esta línea: $('#textoP').html(text) del código. Al usar html() reemplazas cada vez el contenido del elemento, como bien dice la documentación:

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.


Cuando se usa .html() para establecer el contenido de un elemento, cualquier contenido que estaba en ese elemento es completamente reemplazado por el nuevo contenido. Además, jQuery elimina otras construcciones, como controladores de datos y eventos, de elementos secundarios antes de reemplazar esos elementos con el nuevo contenido.

Considera usar append() el cual, como dice la documentación:

The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()).


El método .append() inserta el contenido especificado como el último elemento secundario de cada elemento en la colección jQuery (para insertarlo como el primer elemento secundario, use .prepend()).

                        for (var p = 0; p<nom.length; p++){
                            // console.log(nom[p].nombre)
                            text = nom[p].nombre 
                            console.log(text)
                            $('#textoP').append(text)
                        }

Optimización

Cuando vayas a modificar algo en el DOM no debes olvidar que éste se rederiza cada vez que lo modificas, por eso no conviene nunca modificar el DOM dentro de un bucle. Construye una cadena y haz append una sola vez, fuera del bucle:

                        var text;

                        for (var p = 0; p<nom.length; p++){
                            text += `${nom[p].nombre}<br />`; 
                        }
                        /*
                          El DOM se modificará una sola vez
                          No N veces, donde N puede ser
                          10 veces, 100 veces, 99999 veces
                        */
                        $('#textoP').append(text)

En el caso de necesitar modificar varias partes del DOM, conviene que uses DocumentFragment.

Por otra parte, si se trata de crear una celda por cada nombre, debes hacer append en un elemento tr, no en un elemento th y rodear cada valor dentro del bucle por th.

Veamos un ejemplo:

var response = '[{"nombre":"PERIODO DE PRUEBA"},{"nombre":"PERIODO EXPERIMENTO"}]';

var nom = JSON.parse(response);

var text;

for (var p = 0; p < nom.length; p++) {
  text += `<th>${nom[p].nombre}</th>`;
}
/*
  El DOM se modificará una sola vez
  No N veces, donde N puede ser
  10 veces, 100 veces, 99999 veces
*/
$('#tableHeaders').append(text)
table,
th,
td {
  padding: 10px;
  border: 1px solid black;
  border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr id="tableHeaders">
  </tr>
</table>

12
  • Hola, gracias por tu respuesta Cedano. Me ocurre lo siguiente ahora: Al meterlo como usted me ha puesto me aparecen los dos con un undefined delante ejemplo: (undefinedPrueba1Prueba2) en la misma fila, me gustaría que fuera en filas distintas gracias.
    – nosoyGuti
    Commented el 19 oct. 2022 a las 12:27
  • @nosoyGuti ¿podrías poner un console.log(nom); justo antes del for y decirnos qué muestra? Sin saber lo que hay en el objeto no podría decirte a qué se debe ese comportamiento, puede que algún elemento no tenga la clave nombre. Por otra parte, viendo que textoP es un elemento th, explícanos lo que debe ocurrir, si se debe crean un th por cada nombre o cómo va el asunto. No es lo mismo meter datos en elementos como p, div ... que meterlos en filas o celdas de una elemento table.
    – A. Cedano
    Commented el 19 oct. 2022 a las 12:34
  • Este es el resultado;Array [ {…}, {…} ] ​ 0: Object { nombre: "PERIODO DE PRUEBA" } ​ 1: Object { nombre: "PERIODO EXPERIMENTO" } ​ length: 2 y asi como lo tengo yo success: function(response){ nom = JSON.parse(response) var text; console.log(nom) for (var p = 0; p<nom.length; p++){ text += ${nom[p].nombre}<th/>; } $('#textoP').append(text)}
    – nosoyGuti
    Commented el 19 oct. 2022 a las 12:38
  • @nosoyGuti parece que los objetos vienen a su vez dentro de un array, prueba a definir nom así: nom = JSON.parse(response)[0]; y dinos si desaparece el undefined. Y, si quieres un th por cada nombre, construye cada text empezando por <th> luego el contenido y luego </th>.
    – A. Cedano
    Commented el 19 oct. 2022 a las 12:42
  • La tabla se crea a través de una funcion con sus días como encabezado th y luego se muestra cada día dependiendo del mes. Ahora quiero hacer un encabezado de la consulta de ajax con los nombres que me vengan como otro th y que de cada nombre me muestre los días marcados. Que en principio lo coge todo menos los nombres
    – nosoyGuti
    Commented el 19 oct. 2022 a las 12:44

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.