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>
map()
en reemplazo delfor
. te quedaría algo asínom.map(item => {text = item.nombre})