0

I'm trying to build a Weather app. I created an empty object to store certain data from the fetch response. Then in my fetch function I store the data in key/value pairs. When I console.log the weatherData variable it returns an object in my console but if I try to console.log a key/value of that object it returns undefined. Any idea why they are undefined? I've also tried

weatherData.hasOwnProperty('temp')

which returns false.

let weatherData = {};


function fetchWeather (city) {
        fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=72c205fe50ec0c81fbf1577dbf8e83f0&units=metric`)
        .then(response => {
            return response.json();

        }).then(response => {
            weatherData.temp = response.main.temp;
            weatherData.feels_like = response.main.feels_like;
            weatherData.humidity = response.main.humidity;
            weatherData.wind = response.wind.speed;
            weatherData.description = response.weather[0].description;
        })
        .catch(error => {
            console.log(error);

        });
 };
BigBossBenson
  • 1
  • Where are you doing this console log? – Nick Parsons Mar 23 '21 at 07:56
  • You're most likely experiencing these two issues: [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/q/23667086) and [Is Chrome's JavaScript console lazy about evaluating arrays?](https://stackoverflow.com/q/4057440) – Nick Parsons Mar 23 '21 at 07:58
  • In my index.js file after calling the function here is the code: ``` fetchWeather('barcelona'); console.log(weatherData); console.log(weatherData['temp']); ``` – BigBossBenson Mar 23 '21 at 08:00
  • Ok, yeah, you're experiencing the issues described in the above two links. Your function provided to .then: `response => {}` gets executed sometime in the future after your script has executed. That means `console.log(weatherData);` will run _before_ you populate it with keys/values. The reason why it shows up is because chrome (and other browsers) tend to log a live reference to the object, meaning that the object you're observing in the console isn't what it is at the time of being logged, but rather the changed version after your callback runs. Re-Run your code with your console open – Nick Parsons Mar 23 '21 at 08:04
  • 1
    @NickParsons Thank you btw! Thanks to you I solved the issue. I'm new here so not really sure if there is a way to like your comment or how to thank you for helping – BigBossBenson May 05 '21 at 08:08
  • No worries, glad you resolved your issue. Usually answers will be given below your question in the form of answers, rather than comments. You can then upvote the answer (once you have earned enough points on the site), and mark the most appropriate answer as "answered". This will give the user "reputation" (aka: points), so it's usually a pretty good way to say "thanks". However, as your question was closed as a duplicate, answers can no longer be added to your question, only comments can. You can't award users points through comments, so replying like you did is perfectly fine :) – Nick Parsons May 05 '21 at 09:14

0 Answers0