How to stop "[object Object]" from printing rather than the object itself?

Question

my problem probably has an incredibly easy fix, but I'm new to javascript and can't seem to find an answer for it. Heres the script:

var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
    targetUrl = 'https://api.darksky.net/forecast/[key]/[latitude],[longitude]'
fetch(proxyUrl + targetUrl)
  .then(blob => blob.json())
  .then(data => {
    console.log(data);
    document.getElementById('weather').innerHTML = data;
  })

However when i run it, the <p> element doesnt change to the data itslef, it changes to "[object Object]" What am I doing wrong? Any help is appreciated.

PS: the targetUrl variable has placeholders where the parameters go, it won't run as-is.

Answer 1

From what I understand you are trying to print the data into <p> element with id as "weather".

Please replace following line.

document.getElementById('weather').innerHTML = JSON.stringify(data);

It will work just fine.

Answer 2

Check the data returned by the API call and then add it to the html. I think it is returning an object and you are trying to display that object in the DOM.