title: How to display on a web page the result of an async function fetch?
body: <p>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. </p>
  
  <p>The source API from URL looks like:</p>
  
  <pre><code>{"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"}}
  
  </code></pre>
  
  <p>I have the following code working in JavaScript:</p>
  
  <pre><code>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 =&gt; data.items[0].readings.pm25_one_hourly);
  
  var valueeast = Promise.resolve(resulteast)
    valueeast.then(data =&gt; {
      array = data    
      console.log(array)
    });
  </code></pre>
  
  <p>This gives the following result in console.log:</p>
  
  <pre><code>{ west: 10, east: 9, central: 10, south: 11, north: 3 }
  </code></pre>
  
  <p>Now I would like to display this result in a web page. Something like this:</p>
  
  <pre><code>&lt;p id="value"&gt;&lt;/p&gt;
  &lt;script&gt;
  // 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 =&gt; data.items[0].readings.pm25_one_hourly);
  
     var valueeast = Promise.resolve(resulteast)
         valueeast.then(data =&gt; {
         array = data    
         document.getElementById("value").innerHTML = "South " + array
         });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I get no result on the web page. </p>
  
  <p>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.</p>
  
  <p>Please advise!</p>