CODEWITHSUNDEEP
javascripthtmlpromise
Jim
Jim

Reputation: 13

How to display on a web page the result of an async function fetch?

Have writing a piece of js code to get API data from a URL and want to integrate this in a web page to display the results.

The source API from URL looks like:

{"region_metadata":[{"name":"west","label_location":{"latitude":1.35735,"longitude":103.7}},{"name":"east","label_location":{"latitude":1.35735,"longitude":103.94}},{"name":"central","label_location":{"latitude":1.35735,"longitude":103.82}},{"name":"south","label_location":{"latitude":1.29587,"longitude":103.82}},{"name":"north","label_location":{"latitude":1.41803,"longitude":103.82}}],"items":[{"timestamp":"2020-02-28T15:00:00+08:00","update_timestamp":"2020-02-28T15:08:52+08:00","readings":{"pm25_one_hourly":{"west":3,"east":8,"central":9,"south":10,"north":8}}}],"api_info":{"status":"healthy"}}

I have the following code working in JavaScript:

async function getdata() {
  const fetch = require("node-fetch")
  let response = await fetch('https://api.data.gov.sg/v1/environment/pm25')
  let data = await response.json()
  return data
};

const resulteast = getdata().then(data => data.items[0].readings.pm25_one_hourly);

var valueeast = Promise.resolve(resulteast)
  valueeast.then(data => {
    array = data    
    console.log(array)
  });

This gives the following result in console.log:

{ west: 10, east: 9, central: 10, south: 11, north: 3 }

Now I would like to display this result in a web page. Something like this:

<p id="value"></p>
<script>
// Fetch data from remote website
   async function getdata() {
       const fetch = require("node-fetch")
       let response = await fetch('https://api.data.gov.sg/v1/environment/pm25')
       let data = await response.json()
       return data
       };

   const resulteast = getdata().then(data => data.items[0].readings.pm25_one_hourly);

   var valueeast = Promise.resolve(resulteast)
       valueeast.then(data => {
       array = data    
       document.getElementById("value").innerHTML = "South " + array
       });

</script>

I get no result on the web page.

Do I call the document.getElementById at the right place? It seems I can't get a response from the promise out side of the arrow function. As I can display other variables on the web page.

Please advise!

Upvotes: 1

Views: 2268

Answers (2)

noonelikeme
noonelikeme

Reputation: 106

// Fetch data from remote website
   async function getdata() {
       // const fetch = require("node-fetch")
       let response = await fetch('https://api.data.gov.sg/v1/environment/pm25')
       let data = await response.json()
       return data
       };

   const resulteast = getdata().then(data => data.items[0].readings.pm25_one_hourly);

   var valueeast = Promise.resolve(resulteast)
       valueeast.then(data => {
       array = data
         document.getElementById("value").innerHTML =  JSON.stringify(array);
       });
<p id="value"></p>

Can use this code if you want to print in the same way { west: 10, east: 9, central: 10, south: 11, north: 3 }

Upvotes: 5

Zoldszemesostoros
Zoldszemesostoros

Reputation: 397

You cannot append an array or an object to the webpage, only strings.

document.getElementById("value").innerHTML = "South " + array["south"];

Sorry if I misunderstood your question.

Upvotes: 0

Related Questions