tengo el siguiente código para mostrar en el html lo que contiene un archivo json. El problema es que no se imprime, y en la consola no se muestra ningún error (lo estoy haciendo con Live Server). El unico error que se muestra es en Mozilla, dice lo siguiente (no entiendo que significa): GET http://127.0.0.1:5500/pingus.json [HTTP/1.1 304 Not Modified 1ms]
JS:
window.addEventListener("load", inicio);
function inicio(){
document.getElementById("cargaInformacion").addEventListener('click', cargar);
}
function crearPromesa(url) {
return new Promise (function (resolve,reject) {
var xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.onreadystatechange = function(){
if (this.status == 200 && this.readyState == 4) {
resolve(this)
}
};
xhr.onerror = function() {
reject (Error("Network Error"));
};
xhr.send();
});
}
function cargar(){
let url = "personas.json";
crearPromesa(url)
.then (json => cargarJSON(json))
.catch(e => console.log(e));
}
function cargarJSON(json)
{
var myObj = JSON.parse(json.responseText);
nombres = Object.keys(myObj); // genera un array con el nombre de las propiedades del objeto
for(i=0;i<myObj.lenght; i++){
document.getElementById("contenedor").innerHTML += myObj[i].nombre + "</p><br> <img src="+ myObj[i].ruta+"></img>"
}
}
HTML
<div >
<img id="img1" src="./images/pingu4.jpg" />
<p> imagen 1 </p>
</div>
<div id="contenedor"></div>
JSON
[
{
"nombre": "persona1",
"ruta": "./images/image1.jpg"
}, {
"nombre": "persona2",
"ruta": "./images/image2.jpg"
}, {
"nombre": "persona3",
"ruta": "./images/image3.jpg"
}
]
contenedor
. Se supone que ahí es donde quieres devolver los datos.