Fetching data from API using Javascript and then pushing the value to a DIV

April 10, 2023

I am trying to get data from a free APi : API URL

I then want to push the full response into a div on my page.
I can consolelog it fine, my solution is not working.
This is what i have tried.

async function fetchData() {
    fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
  .then((response) => response.json())
  .then((json) => console.log(json));
    i = json;
    console.log(i);
    document.getElementById('matcher').innerHTML = i.toString();
}

>Solution :

async function fetchData() {
    fetch('https://jsonplaceholder.typicode.com/posts/1/comments').then(function (response) {
    // The API call was successful!
    return response.json();
}).then(function (data) {
    // This is the JSON from our response
    console.log(data);
    document.getElementById('matcher').innerHTML = data[0].body;
}).catch(function (err) {
    // There was an error
    console.warn('Something went wrong.', err);
});
}