Accessing the JSON data from an API

JavaScript
1

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

2

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
3

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
5

It worked like y’all said. Thank you.