Por favor, lea cuidadosamente esta publicación. Le ayudará comprender bien por qué le ocurre lo planteado en su pregunta. Tampoco olvide leer los comentarios dejados en el código.
Lo que ocurre es que estás obteniendo datos tipo JSON, pero con un formato de respuesta como la que sigue:
Content-Type: text/html
O esta otra:
Content-Type: text/plain
A partir de las siguientes líneas:
$.ajax({
url: "../ServletInfoFrutas",
method: "POST",
success: function (data) {
$("#contenido").html(data);
},
});
Específicamente en estas líneas:
...
success: function (data) {
$("#contenido").html(data);
}
Donde el argumento data
de la función devuelve una cadena (string) que debe ser parseada antes de manipular los datos de la forma en el que se plantea en la publicación. Esto no sería necesario si el formato de respuesta del servidor devolviera el siguiente formato:
Content-Type: application/json
Ya que jQuery los parsea automáticamente en función del formato de respuesta que recibe del servidor. Entonces, cuando se ejecuta la siguiente línea:
$("#contenido").html(data);
El contenido del argumento data
, que es una cadena (string) pasa a integrarse, tal y como le llega al elemento contenido
(como simple texto).
Propuesta de solución
Una propuesta de solución sería modificar estas líneas:
success: function (data) {
$("#contenido").html(data);
},
Es decir, parseando antes el argumento data
para convertirlo en un objeto JavaScript que pueda manipular:
// Justo acá se parsea:
data = JSON.parse(data);
// Y luego, lo desestructuramos obteniendo un array de objetos, donde
// «datos» es el array de objetos:
const { datos } = data;
// Y finalmente, recorremos nuestro bucle:
$(datos).each((i, dato) => {
$("#contenido").html(`id: ${dato.id}<br>Fruta: ${dato.Fruta}`);
});
Lo anterior es código basado en jQuery
O modificando el formato de respuesta del backend.
Si tomamos nota de lo anterior, nuestro código (el que hace la petición) quedaría así:
$.ajax({
url: "../ServletInfoFrutas",
method: "POST",
success: function (data) {
data = JSON.parse(data);
const { datos } = data;
$(datos).each((i, dato) => {
$("#contenido").html(`id: ${dato.id}<br>Fruta: ${dato.Fruta}`);
});
},
});