FCC Cat Photo API Not Working?

Tell us what’s happening:
So I’m going through the JSON and AJAX challenges for the first time, so I might totally be mistaken. But from the directions to this challenge, it seems like the API should be returning some data and displaying it on the page before we write any code. Here is what I mean:

On the right, click the “Get Message” button to load the freeCodeCamp Cat Photo API JSON into the HTML.
The first and last character you see in the JSON data are square brackets [ ].

Looking closely, you can see that there are three separate objects.

But clicking the button does nothing so there is nothing to see. I don’t really understand what the challenge itself is asking for either.

Is this maybe a problem from the curriculum update, or is it a problem with my browser?

Your code so far (Unaltered code from the challenge)


<script>
document.addEventListener('DOMContentLoaded',function(){
  document.getElementById('getMessage').onclick=function(){
    req=new XMLHttpRequest();
    req.open("GET",'/json/cats.json',true);
    req.send();
    req.onload=function(){
      json=JSON.parse(req.responseText);
      document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
      // Add your code below this line


      // Add your code above this line
    };
  };
});
</script>
<style>
body {
  text-align: center;
  font-family: "Helvetica", sans-serif;
}
h1 {
  font-size: 2em;
  font-weight: bold;
}
.box {
  border-radius: 5px;
  background-color: #eee;
  padding: 20px 5px;
}
button {
  color: white;
  background-color: #4791d0;
  border-radius: 5px;
  border: 1px solid #4791d0;
  padding: 5px 10px 8px 10px;
}
button:hover {
  background-color: #0F5897;
  border: 1px solid #0F5897;
}
</style>
<h1>Cat Photo Finder</h1>
<p class="message">
The message will go here
</p>
<p>
<button id="getMessage">
  Get Message
</button>
</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36.

Challenge: Access the JSON Data from an API

Link to the challenge:
https://www.freecodecamp.org/learn/data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api

I also had this issue. The variables on lines 4 & 9 are not defined to start. This got it to work for me.

let req=new XMLHttpRequest();

let json=JSON.parse(req.responseText);

@pjonp yes that worked for me, thanks! I was also wondering about the absence of let. It’s missing on all the challenges in this section with that same code. I just assumed that to be correct.