Как отобразить на веб-странице результат вызова функции asyn c?

Question

Написание части кода js для получения данных API из URL-адреса и желание интегрировать их в веб-страницу для отображения результатов.

Исходный API из URL выглядит следующим образом:

{"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"}}

У меня есть следующий код, работающий в 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)
  });

Это дает следующий результат в консоли .log:

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

Теперь я хотел бы отобразить этот результат на веб-странице. Примерно так:

<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>

Я не получаю результата на веб-странице.

Я вызываю document.getElementById в нужном месте? Кажется, я не могу получить ответ от обещания вне функции стрелки. Как я могу отображать другие переменные на веб-странице.

Пожалуйста, сообщите!

Answer 1

// 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>

Можно использовать этот код, если вы хотите печатать таким же образом {запад: 10, восток: 9, центральный: 10, юг: 11, север: 3}

Answer 2

Вы не можете добавить массив или объект на веб-страницу, только строки.

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

Извините, если я неправильно понял ваш вопрос.