Accessing the JSON data from an API

The Get Message button is not functioning, i can’t see the Data i’m supposed to log to the console.

Your code so far


<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
console.log(json.cat[2])

      // 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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 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

The challenge is missing a let in these two lines:

      req=new XMLHttpRequest();

and

      json=JSON.parse(req.responseText);

If you add that in, the button should work for you.
Like this:

      let req=new XMLHttpRequest();

and

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

Just like stressstressstress mentioned the code is missing variable declaration.
when adding things like let, const, var keyword you are essentially telling javaScript about your variable (declaring it). Only with that JavaScript would know later on what req or json variables are.

1 Like

I have created a pull request which adds the declarations for all of the challenges in this section. Once it gets merged and pushed to production, the challenges will have the proper declarations in the initial challenge seed code.

3 Likes

It worked like y’all said. Thank you.