2

Estoy tratando de leer datos de un archivo .json que codifiqué usando javascript, sin embargo no logro que me muestre algo... Probé imprimirlo en texto plano y ahí sí funciona. Estoy usando WAMP como servidor de pruebas. Acá el código del javascript

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var respuesta = JSON.parse(xhttp.responseText);
    var personas = respuesta.personas;
    var salida = '';
    for (var i = 0; i < personas.lenght; i++) {
      salida = "<li>" + personas[i].nombre + "</li>";

    }
    document.getElementById("personas").innerHTML = salida;
  }
}
xhttp.open("GET", "personas.json", true);
xhttp.send();

Acá el código del json

{
    "personas":[
        {"nombre":"Jose De Marzo","edad":19,"estudiante":true,"edo_civil":"soltero"},
        {"nombre":"Nelson Carrasco","edad":19,"estudiante":false,"edo_civil":"casado"},
        {"nombre":"Marlyn Montero","edad":39,"estudiante":false,"edo_civil":"soltera"}
    ]
}

No muestra nada en pantalla, sin embargo sin pasarlo a json sí lee el texto plano.

3
  • Estás concatenando mal salida y los li deben estar dentro de un <ul></ul> para verse. ¿Lo tienes?
    – A. Cedano
    Commented el 3 ago. 2020 a las 20:40
  • Hola Jose, He testeado tu codigo y con XMLHttpRequest si bien recibo el string el parseo no da errores pero no tengo acceso a personas del array. Pero si usas fetch o JQUERY ajax anda perfecto. Asumo que debes agregar encabezado JSON tipo aplicacion JSON. y el accept.
    – toto
    Commented el 3 ago. 2020 a las 21:07
  • 1
    ¿Por qué no usar fetch y promesas? Simplifica mucho el código Commented el 4 ago. 2020 a las 11:09

1 respuesta 1

2

Este código gracias a dios no te ha funcionado.

var salida = '';
for (var i = 0; i < personas.lenght; i++) {
      salida = "<li>" + personas[i].nombre + "</li>";

    }
    document.getElementById("personas").innerHTML = salida;
  }
}

Usa siempre el mismo tipo de comillas para que no montes un show a la larga. https://javascript.info/coding-style

.length está mal escrito.

salida solo va a guardar la asignación de la última iteración. Usa salida += que es un atajo de salida = salida + "lo que le metes";

Asignando html directamente, este puede ser parseado en tiempo de ejecución. El navegador verá el

<li>

sin cerrar y te añadirá el cierre. Es decir,

"<li>" + personas[i].nombre + "</li>"

puede quedar:

<li></li>Paco<li></li>.

Para solucionarlo crea elementos con:

document.createElement("li").innerText = personas...

Fíjate que utilicé innerText en lugar de innerHTML. No debes usar innerHTML con información que el usuario pueda manipular ya que podrá inyectar código javascript en tu aplicación y modificar tu web.

Fuera de la iteración los agregas todos a donde corresponda:

<list id="personas"></list>
...
document.querySelector("#personas").appendChild(listas);

Si tienes varios list u otros elementos, cada vez que haces un appendChild estás renderizando el documento de 0. Para evitarlo debes crear un Fragment (es como una copia mínima de document) al que insertarle todos los elementos. Una vez lo tienes ya solo necesitas hacer una inserción del Fragment en el documento, por lo que solo se "recarga" todo el documento una vez. https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

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.