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)")
...