Get JSON with the JavaScript XMLHttpRequest Method

Tell us what’s happening:
I cannot successfully request the JSON from freeCodeCamp’s Cat Photo API. Specifically, when I click on the “get message” button, the AJAX function won’t replace the “The message will go here” text with the raw JSON output from the API.
I’m thinking that the supplied URL for the cat photo api is incorrect. If this is true, then does anyone know the new or correct url for the cat photo api?
If this isn’t the issue, please help still. Thanks!

Edit: Not being able to see the JSON appear when I click the “Get Message” button is preventing me from moving further along with the lessons as the very next lesson - https://learn.freecodecamp.org/data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api - utilizes the message that I can’t see.
Do you think this might be a related issue to why the console doesn’t print anymore since freeCodeCamp’s update last week?

Your code so far


<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick=function(){
      // Add your code below this line
      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 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 box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method

1 Like

Hi @therightduke,

Your answer is right, but some time space make example unsolved, so try to remove the what you write and copy paste my answer, i try it and it is work.
Solution:

<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick=function(){
      // Add your code below this line
      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 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 box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

Hope this solve your problem, good luck my friend.

Regards,
Ali Mosaad

1 Like

Thank you for your help Ali! But the problem is still the same. Not being able to see the JSON appear when I click the “Get Message” button is preventing me from moving further along with the lessons as the very next lesson - https://learn.freecodecamp.org/data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api - utilizes the message that I can’t see.
Do you think this might be a related issue to why the console doesn’t print anymore since freeCodeCamp’s update last week?

Your code is correct and passes the test. There is a bug in the test because devtools console is reporting a 404 error when fetching the resource.

Hi @therightduke,

I agree totally with @JM-Mendez.

Some times changing browser will solve issue but still there is a many bugs in website, by the day these bugs will disappear.

Regards,
Ali Mosaad

The code tries fetching this resource https://learn.freecodecamp.org/json/cats.json, but the data is actually here: https://www.freecodecamp.org/json/cats.json

How can you by pass this bug?

2 Likes

You’ll have to post an issue on the tracker. I just tried but they have CORS enabled and this subdomain can’t access it.

Has this been resolved yet?

@wes-patterson no not yet.

I am passing the test but when I click the Get Message button it returns to be what appears to me as part of a JSON doc. Not sure if that was to be expected. I was expecting graphics to be rendered.