What is your hint or solution suggestion?
Since given JSON data is an array made up of objects ,we can use bracket notation to access an object inside the array which we require.Further to access particular key-value pairs of the object we can access it by calling the particular key of the object using dot notation.Since in the provided data the key "codeNames" is an array we can access its contents with bracket notation.
Solution
<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick = function(){
const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json', true);
req.send();
req.onload=function(){
const json = JSON.parse(req.responseText);
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
// Add your code below this line
console.log(json[2].codeNames[1]);
// 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>
Challenge: Access the JSON Data from an API
Link to the challenge:
