LocalWeatherApp - works for the data, doesn't for the image?

1

Hi,

I’m working on everyone’s favorite local weather app right now, and I’m currently struggling with the fact that in my code I can successfully get all the weather data with the call to the openweathermap api with the key but I can’t seem to get the image that corresponds to the received code. The call to the image is via a separate call and by all indications it should work but fails a CORS authentication check, even when the API key is added to the end.

I know there’s been some scattered issue with this API, so I was curious if anyone’s managed to find a consistent workaround for this.

Code snippet below:

var weatherKey = "&APPID=89ab48db1976e81aac83a412715d4e81";
          
          fetch("https://api.openweathermap.org/data/2.5/weather?q="+cityName+"&APPID=89ab48db1976e81aac83a412715d4e81").then(function(response){
            response.text().then(function(text){
              var weatherResponse = JSON.parse(text);
              var conditions = weatherResponse.weather[0].main;
              var country = weatherResponse.sys.country;
                console.log(country);
              var weatherIconText = weatherResponse.weather[0].icon;

              var weatherIcon;

              /*********
              Get weather log here!  
              ********/
                function readResponseAsBlob(response){
                  return response.blob();
                }
                function showImage(){

                  var container = document.getElementById('icon');
                  var imgElem = document.createElement('img');
                  container.appendChild(imgElem)
                }
                function logError(error){
                  console.log('Looks like there was a problem: \n' , error);
                }

                function fetchImage(pathToResource){
                  fetch(pathToResource)
                    .then(readResponseAsBlob)
                    .then(showImage)
                    .catch(logError);
                }

                fetchImage("http://openweathermap.org/img/w/"+weatherIconText+".png)")
...
2

Hi

I’m not sure about the CORS aspect of it, but looking at the code you posted, I think you might need to include a source attribute to your img html element before you append it if your problem is that the image isn’t actual appearing in the page as you expect. This would be the same as your “pathToResource” which you might want to save into a variable. Probably want to make sure to get that over https too [your code is just http].

Hope that helps.

I have successfully added the icon in my project, see Weather app

var iconUrl = "https://openweathermap.org/img/w/" + weatherIconText + ".png";
imgElem.setAttribute("src", iconUrl);
3

I think that all weather types don’t have icon, you can check for it with if statement…

Yes, I’m sure now, here is the log:

{coord: {…}, weather: Array(1), base: "stations", main: {…}, visibility: 10000, …}base: "stations"clouds: {all: 75}cod: 200coord: {lon: 139, lat: 35}dt: 1499396400id: 1851632main: {temp: 28.23, pressure: 1011, humidity: 74, temp_min: 26, temp_max: 31}name: "Shuzenji"sys: {type: 1, id: 7616, message: 0.0043, country: "JP", sunrise: 1499369792, …}visibility: 10000weather: Array(1)0: description: "broken clouds"id: 803main: "Clouds"__proto__: Objectlength: 1__proto__: Array(0)wind: {speed: 3.6, deg: 230}__proto__: Object