Question 172514 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can I get help troubleshooting data fetching from an API using JavaScript & JSON?

I am making a weather app using HTML, CSS, JS, so i took api from https://openweathermap.org/current and used that in my code but i didn’t get the proper/expected result in the browser console.
I don’t know how to access the objects from the result. I need to take/access weather.main, main.temp, main.humidity, wind.speed

code:

async function getData(){
    let response = await fetch(weatherAPI);
    let data = await response.json();
    return data;
}

console.log(getData());

result:

Promise {<pending>}
[[Prototype]]
: 
Promise
[[PromiseState]]
: 
"fulfilled"
[[PromiseResult]]
: 
Object
base
: 
"stations"
clouds
: 
{all: 20}
cod
: 
200
coord
: 
{lon: -0.1257, lat: 51.5085}
dt
: 
1684501221
id
: 
2643743
main
: 
{temp: 15.6, feels_like: 14.86, temp_min: 14.72, temp_max: 17.25, pressure: 1026, …}
name
: 
"London"
sys
: 
{type: 2, id: 2075535, country: 'GB', sunrise: 1684469018, sunset: 1684525832}
timezone
: 
3600
visibility
: 
10000
weather
: 
[{…}]
wind
: 
{speed: 3.6, deg: 50}
[[Prototype]]
: 
Object

expected result:

{
  "coord": {
    "lon": 10.99,
    "lat": 44.34
  },
  "weather": [
    {
      "id": 501,
      "main": "Rain",
      "description": "moderate rain",
      "icon": "10d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 298.48,
    "feels_like": 298.74,
    "temp_min": 297.56,
    "temp_max": 300.05,
    "pressure": 1015,
    "humidity": 64,
    "sea_level": 1015,
    "grnd_level": 933
  },
  "visibility": 10000,
  "wind": {
    "speed": 0.62,
    "deg": 349,
    "gust": 1.18
  },
  "rain": {
    "1h": 3.16
  },
  "clouds": {
    "all": 100
  },
  "dt": 1661870592,
  "sys": {
    "type": 2,
    "id": 2075663,
    "country": "IT",
    "sunrise": 1661834187,
    "sunset": 1661882248
  },
  "timezone": 7200,
  "id": 3163858,
  "name": "Zocca",
  "cod": 200
}

I need this expected result so that i can use the properties of the json data

Tags:

2

Answers


  1. 0

    You aren’t waiting for the promise to be fulfilled.

    let data = await getData() // data will hold your response

OR

async function logData() {
  let data = await getData();
  console.log(data);
}

logData(); // console logs your expected result
    Login or Signup to reply.
  2. 0

    The reason is that you are not waiting for the promise fulfilled. Mainly a promise has 3 statutes. (pending, fulfilled and rejected.)

    • pending – Before resolving the promise.
    • fulfilled – after resolving the promise successfully.
    • rejected – promise resolving failed.

    when you call the getData() method without async/await or .then(), it will print the pending states result instead of the expected result. If you want to print actual results you have to put .then() or async/await.

    getData().then((res)=>{

  console.log(res)

})

    or

    (async ()=>{

  const response = await getData();
  console.log(response)

})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search