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: