Question

0

107

Views

My Icons in open weather map aren't changing

I cant get my icons to change, I know what I've done is a mess, please somebody help me. I uploaded my icons in cloudinary, cause that's the only way I know to access images in stackblitz

fetch(api)
   .then(response => { return response.json(); })
   .then(data => {
       console.log(data.weather[0].icon)
       const {temp} = data.main;
       const {description} = data.weather[0];
       const {icon} = data.weather[0]; 
       temperatureDescription.textContent = description;
       temperatureDegree.textContent = Math.floor(temp - 273.15);
       locationTimezone.textContent = data.name;
       locationIcon = icon;
    })
    .then(function(){
        displayWeather();
        locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">`;
    });
})();

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T05:30:38.039Z

The Problem

You've forgotten to return the icon from the second then and obviously didn't pass the returned data from the second then into the third then to use them.

How to fix it

return the icon or your whole data from the second then to use it on the third one:

fetch(api)
   .then(response => { return response.json(); })
   .then(data => {
       console.log(data.weather[0].icon)
       const {temp} = data.main;
       const {description} = data.weather[0];
       const {icon} = data.weather[0]; 
       temperatureDescription.textContent = description;
       temperatureDegree.textContent = Math.floor(temp - 273.15);
       locationTimezone.textContent = data.name;
       
       return icon  // -----> here
    })
    .then(function(icon){   // ----> pass the returned data to the function param to use it in this function
        displayWeather();
        locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">`;
    });
})();

Optionally

It seems that the third then changing is redundant, you can do the same with the second then, in this code snippet, I removed the unwanted parts:

fetch(api)
   .then(response => response.json())
   .then(data => {
       const {temp} = data.main;
       const {icon, description} = data.weather[0];

       temperatureDescription.textContent = description;
       temperatureDegree.textContent = Math.floor(temp - 273.15);
       locationTimezone.textContent = data.name;
       locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">`
       
       displayWeather();

   })
   .catch(error => console.log(error)) 
})();

Note: always use the catch block with the asynchronous actions to catch the errors and do the proper actions in the failure case. here I just logged the error message, you can customize this section by adding the desired functionality.

0

107