I’ve been trying to render some objects from a test JSON file, but it doesn’t seem to be working. I’ve copied similar code from this website: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but adjusted to my own JSON file. I’ve tried to troubleshoot it, but I can’t see what the problem is.
Here is the code I have:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
</header>
<section>
</section>
<script>
const header = document.querySelector('header');
const section = document.querySelector('section');
let requestURL = 'http://www.piwebinars.co.uk/test.json';
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'text';
request.send();
request.onload = function() {
const superHeroesText = request.response;
const superHeroes = JSON.parse(superHeroesText);
renderComments(superHeroes);
}
function renderComments(jsonObj) {
const currentComments = jsonObj['post'];
for (let i = 0; i < currentComments.length; i++) {
const myArticle = document.createElement('article');
const renderMessage = document.createElement('p3');
const renderCommentLikes = document.createElement('h6');
const renderLikeButton = document.createElement('button');
const renderReplyButton = document.createElement('button');
renderMessage.textContent = currentComments[i].text;
renderCommentLikes.textContent = currentComments[i].name;
renderLikeButton.textContent = "Like Comment";
renderReplyButton.textContent = "Reply Comment";
myArticle.appendChild(renderMessage);
myArticle.appendChild(renderCommentLikes);
myArticle.appendChild(renderLikeButton);
myArticle.appendChild(renderReplyButton);
section.appendChild(myArticle);
};
};
</script>
</body>
</html>
Help would be appreciated, thanks.