I need assistance with implementing a JavaScript function to retrieve data from a JSON file and then display it on my webpage. The goal is to iterate through the values in a while loop and dynamically insert them into specific HTML elements.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var vt = JSON.parse(this.responseText);
while () { // Loop through each value and insert into HTML
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();
This is the JSON data I am working with:
{
"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"
}
}