2

Mi Servlet (Java Netbeans) me devuelve el siguiente JSON:

{
  "datos": [
    { "id": 1, "Fruta": "Manzana" },
    { "id": 2, "Fruta": "Mandarina" }
  ]
}

En Ajax tengo lo siguiente:

$.ajax({
    url: "../ServletInfoFrutas",
    method: 'POST',
    success: function (data) {
        $("#contenido").html(data);
    }
});

Pero cuando visualizo el navegador en el div aparece lo siguiente:

<div id='contenido'>
    {
     datos": [
        { "id": 1, "Fruta": "Manzana" },
        { "id": 2, "Fruta": "Mandarina" }
     ]
    }
</div>

Y lo que quiero es poder acceder al id y al Nombre de la Fruta por JQuery para poder insertarlo en el <div></div>, quiero obtener algo así:

<div id='contenido'>
    Id: 1
    Fruta: Manzana
</div>

Y así con las demás frutas

2 respuestas 2

2

Le aconsejo que aprenda cosas como React js o como Vue js que hacen que esto sea más fácil, JQuery ya esta un poco obsoleto. Para lograr su objetivo es necesario recorrer el arreglo del JSON en la respuesta , es decir el atributo "datos". Adjunto el código para recorrer las frutas y ponerlas cada una en un div donde el id de cada div va a ser el id de la fruta, aunque esto sería mejor meterlo en una lista (ul), pero eso ya queda a desición suya donde lo quiera meter.

 //Esta variable frutas sería el equivalente a la respuesta, osea lo que recibe en el succes dentro del ajax request
 let frutas=`{
     "datos": [
        { "id": 1, "Fruta": "Manzana" },
        { "id": 2, "Fruta": "Mandarina" }
     ]
    }`;

     let frutasArreglo=JSON.parse(frutas);

     let datos=frutasArreglo.datos;

    for (let index = 0; index < datos.length; index++) {
        const element = datos[index];
        $("#contenido").append(`<div id="${element.id}">${element.Fruta}</div>`);
    }
 
  
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

</head>
  <div class="frutas" id="contenido">
        
    </div>

1
  • Muchas gracias, me sirvió bastante
    – Unknown
    Commented el 9 sept. 2021 a las 13:54
0

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}`);
    });
  },
});
1
  • Gracias por la ayuda, me he dado cuenta que mi servlet tienen el Content-Type : text/html
    – Unknown
    Commented el 9 sept. 2021 a las 13:56

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.