Promise Chaining?

Question

I'm trying to chain two promises together that will enable me to get both the current weather from the open weather map API and display it on a Card div. This portion I already have functioning as it is supposed to however under that I would also like to display the weather for 5 days. I am attempting to chain these two fetch request so that when a user enters a city the current weather continues to be pulled up on the Card div in the middle of my app and the weather for that week will be displayed at the bottom. However, this is my first time trying to chain promises from an API together in order to make a cohesive function happen and currently I do not yet understand enough about this particular concept to know where the breakdown is. I am aware of the async await but because my entire project is contained within weather { I am unsure of the syntax of how to use async await in this case. With what I have now it is just a lot even if it was functioning. But the main issue I notice is that doing data.weekWeatherUrl makes the URL inaccessible (makes it declared but not read and doing the opposite makes data the same way.

JavaScript:

weatherData = {

getWeatherInfo: function (city) {
    const currentWeatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=${currentWeatherApiTag}`;
    const weekWeatherUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=imperial&appid=${weekForecastApiTag}`;

    fetch(currentWeatherUrl)
    .then(function(response) {
        return response.json();
    })
    .then(function (data) {
      return fetch(data.weekWeatherUrl)
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        this.unveilWeather(data);
    },
 
    unveilWeather: function (data) {
    const {name} = data;
    const {icon} = data.weather[0];
    const {description} = data.weather[0];
    const {temp} = data.main;
    const {humidity} = (data.main);
    const {speed} = data.wind;
    console.log(name, icon, description, temp, humidity, speed);
    document.querySelector("#City").innerText = "Weather in " + name;
    document.querySelector(".weather-icon").src =`http://openweathermap.org/img/wn/${data.weather[0].icon}.png`;
    document.querySelector("#CityWeatherDescription").innerText = description;
    document.querySelector("#Temperature").innerText = temp + " °F";
    document.querySelector (".humidity-weather-stat").innerText = "Humidity : " +  humidity + "%";
    document.querySelector(".wind-speed-weather-stat").innerText = "Wind Speed : " + speed + "m/hr";
    
},



searchCurrentWeather: function () {
    this.getCurrentWeatherInfo(document.querySelector("#Search-Bubble").value);
},


};

document.getElementById("SearchBtn").addEventListener("click", function () {
weatherData.searchCurrentWeather();

});

document.getElementById("Search-Bubble").addEventListener("keyup", function (event) {
if (event.key === "Enter") {
    weatherData.searchCurrentWeather();
}
});

weatherData.getCurrentWeatherInfo("Brooklyn");

I am brand new to coding and working through self-teaching

thanks!

There's a missing `); }` after your `then` chain (to close the `getWeatherInfo` function), your browser devtools should report a syntax error. Also `this.unveilWeather(data);` [has the wrong `this`](https://stackoverflow.com/q/20279484/1048572) — Bergi, Sep 22 '22 at 11:35

score 2 · Answer 1 · answered Sep 22 '22 at 04:28

2

What you'll want to use is Promise.all()

const fetchCurrWeather = fetch(currentWeatherUrl)
    .then(function(response) {
        return response.json();
    });

const fetchWeekWeather = fetch(weekWeatherUrl)
    .then(function(response) {
        return response.json();
    });

Promise.all([fetchCurrWeather, fetchWeekWeather])
   .then(function(weatherData) {
     // Show current weather
     this.unveilWeather(weatherData[0]);
    
    // Show Weekly Weather
     for(const day in weatherData[1].list) {
       this.unveilWeather(day);
     }
   });

answered Sep 22 '22 at 04:28

Stephen Gilboy

5,572
2
30
36

Thank you so much! I've been on this all day and it's pretty the last thing for this project that was hanging me up. It can be really intimidating being on here is a new coder/programmer whatever the accepted lingo is today. I can understand how it might be frustrating for seasoned people to deal with the noobs. But at the same time I wish some people could remember that they were at once beginners as well. I appreciate you, man! – Max Sep 22 '22 at 04:34
This solution doesn't work you can't const like this within an object unless I'm missing something? – Max Sep 22 '22 at 05:28
@Max It's not withing the object but within the function of the object. – Xion 14 Sep 22 '22 at 08:14

Promise Chaining?

1 Answers1