JSON APIs and AJAX - Get JSON with the JavaScript fetch method

JavaScript
1

Tell us what’s happening:

I honestly don’t know what else to do.

this code:

fetch(‘/json/cats.json’)
.then(response => response.json())
.then(data => {
document.getElementById(‘message’).innerHTML = JSON.stringify(data);
});

passed all the test except for “1. Your code should use the fetched data to replace the inenr HTML”

Your code so far

<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('getMessage').onclick = () => {
      // Add your code below this line
      fetch('/json/cats.json')
        .then(response => response.json())
        .then(data => {
          document.getElementById('message').innerHTML = JSON.stringify(data);
        });
    };
  });
      // 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 id="message" class="box">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; rv:143.0) Gecko/20100101 Firefox/143.0

Challenge Information:

JSON APIs and AJAX - Get JSON with the JavaScript fetch method

2

Hi @leonn09

There is an error message in the console.

Check the closing parentheses after fetch.

Happy coding