Me gustaría que mi Javascript llame a mi JSON (que se muestra a continuación) para poder acceder a él en un ciclo while, como este: v[0].title;
Básicamente, quiero saber cómo recorrer cada valor de abajo hacia arriba e insertarlo en mi html.
xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var vt = JSON.parse(this.responseText); while (document.getElementsByClassName("box-head") != vt.sux27.title) { document.getElementsByClassName("box-href")[i].href = vt.sux27.link; document.getElementsByClassName("box-img")[i].src = vt.sux27.img; document.getElementsByClassName("box-cat")[i].innerHTML = vt.sux27.categories[1]; document.getElementsByClassName("box-head")[i].innerHTML = vt.sux27.title; document.getElementsByClassName("box-desc")[i].innerHTML = vt.sux27.description; document.getElementsByClassName("box-likes")[i].innerHTML = vt.sux27.rating; document.getElementsByClassName("box-author")[i].innerHTML = vt.sux27.author_name; document.getElementsByClassName("box-author")[i].href = vt.sux27.author_link; i++; } } }; xhttp.open("GET", "https://www.global.cf/website-frontend/articles/articles.json", true); xhttp.send();Aquí está mi json:
{ "sux27": { "img":"https://placecorgi.com/320/240", "categories" : ["#nature", "#pets"], "title" : "Best corgis to get", "description" : "This article contains a cute corgi These dogs are extremely hardy, and will kill without hesistation...", "link" : "https://www.global.cf", "rating" : 27, "author_name" : "Pex co", "author_link" : "www.pex.com" }, "cat": { "img":"http://placekitten.com/320/240", "categories" : ["#pets", "#gross"], "title" : "Cats up the wazzou", "description" : "Do you love dirty yet found cute by some, yet spread desease? Get a cat! This is totaly for u", "link" : "pets.com/pets", "rating" : 0, "author_name" : "Pets.com", "author_link" : "pets.com" } }Dado que necesita recorrer un objeto, puede usar Object.keys para convertirlo en una matriz y luego puede usar métodos de iteración de matriz.
Object.keys(vt).forEach( (item, id) => { // here item will equal to each key in the object document.getElementsByClassName("box-href")[id].href = vt[item].link // you can continue doing this for your rest of the elements })