0

I am trying to display specific data (local time, swell, wind, temperature) from a JSON array from an API call. I don't need all the data but I'm not sure how to only get the info I need and make it appear in a table on the browser.

Right now I'm getting all the JSON data in my console and I can display the entire string in on the browser.

var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
    targetUrl ='http://magicseaweed.com/api/0491dd8a14784887e8e150d44fea9953/forecast/?spot_id=867&fields=timestamp,localTimestamp,swell.*,wind.*,condition.temperature'
    fetch(proxyUrl + targetUrl)
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    document.querySelector("pre").innerHTML = JSON.stringify(data, null, 2);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });
Kaushal shah
  • 557
  • 3
  • 12
Christopher
  • 1
  • 2
  • 1
    Do you know how to create a `
    ` using javascript? If not, [this](https://stackoverflow.com/a/14643642/863110) could help you. While you create the table, you can fill it with the data.     – Mosh Feu Aug 01 '19 at 05:37
  • You could map the data returned in the second promise to the structure you need. – pew007 Aug 01 '19 at 05:38

0 Answers0