How do I render objects from a client-side JSON file?

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.