Retrieve return values from async function

user_15198140 0
Viewed 83

I was trying to pass "carparkData" from the async getData() function into addData() function, but it had errors. This is part of a js-html-css stack. Would appreciate some help so that I would be able to remove the zero values from "total lots". Thanks in advance! :)

async function getData() {
    try {
        const response = await fetch ("https://api.data.gov.sg/v1/transport/carpark-availability");
        if (response.ok) {
            const data = await response.json();
            const carparkData = data.items[0].carpark_data;
        }
        return carparkData;
    } catch (error) {console.log(error);}
};
getData();


function addData() {
    var table = document.getElementById("myTable")
    for (var i = 0; i < carparkData.length; i++){
        var x = (carparkData[i].carpark_info[0].total_lots - carparkData[i].carpark_info[0].lots_available) / (carparkData[i].carpark_info[0].total_lots)              
        var utiRate = Number(x).toLocaleString(undefined, { style: 'percent', minimumFractionDigits: 2 })
        var row = `<tr>
                        <td>${carparkData[i].carpark_number}</td>
                        <td>${carparkData[i].update_datetime}</td>
                        <td>${carparkData[i].carpark_info[0].lots_available}</td>
                        <td>${carparkData[i].carpark_info[0].lot_type}</td>
                        <td>${carparkData[i].carpark_info[0].total_lots}</td>
                        <td>${utiRate}</td>
                  </tr>`
        table.innerHTML += row
    }
};
addTable(carparkData);
async-await javascript
1 Answers

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

The async and await keywords enable asynchronous, promise-based behavior so getData() will return a promise you have to attach .then as the work is finished data will be returned.

https://jsfiddle.net/cse_tushar/9q4dL71b/7/

async function getData() {
  try {
    const response = await fetch("https://api.data.gov.sg/v1/transport/carpark-availability");
    if (response.ok) {
      const data = await response.json();
      return data.items[0].carpark_data;
    }
  } catch (error) {
    console.log(error);
  }
};

getData()
  .then(carparkData => {
    console.log(carparkData); 
    if (carparkData) {
      // logic here 
      addTable(carparkData); // ---> call here
    }
  })
  .catch(err => {
    console.log(err);
  });

Another problem with code

const is block-scoped you can't use it outside the block.

if (response.ok) {
    const data = await response.json();
    const carparkData = data.items[0].carpark_data;
}
return carparkData; // you can't use carparkData as it is not available outside the if block.
user_22242650
Related