Weather App - Weather API callback not working

Hey I’ve had many of the same issues. You should have a look at this forum post http://forum.freecodecamp.com/t/lets-discuss-your-local-weather-app/5997/18
And you can see my project link there as well for a working example.

1 Like

Thanks for the reply. I’ve added the .catch to my code, and am checking the console in CodePen and it is not showing anything. Where exactly do you access the ouput from the .catch? I want to make sure I fixed the first JQuery/Bootstrap error after I reordered them in the JS quick-add lightbox.

By promise scope, do you specifically mean the Weather API function code or the geolocation code?
Would moving the geolocation function into the Weather API function fix the second error regarding the position variable?

Thanks, Josh. I had a look at the link you provided, are you saying you need to use a different weather API (Heroku hosted) to get this app to work, instead of the recommended Open Weather API?

I’m kind of new at this but isn’t the actual data stored in the callback function? If I’m right adding ‘&callback=JSON_CALLBACK’ to the end of the URL should fix it.

Check your browser console rather than the CodePen console, or change the console method to console.log(). I’m not sure that CodePen has an error output.

As fo the position variable, you’re trying to use it on lines 36 and 37, but it’s only defined within the function from lines 30 to 32.

Thanks for the tip, I tried it, but it didn’t work.

var weatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=*****MYKEY*****&callback=JSON_CALLBACK";

No, to be able to use the Open Weather API on HTTPS you need to use a CORS server(Heroku Hosted). You do that like so:
"https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/… "
In other words you simply put “https://cors-anywhere.herokuapp.com/” before your openweather API call. This will basically relay your request and the response off their servers. It’s a work around that is needed because navigator.geolocation.getCurrentPosition() will only work with HTTPS on many browsers.
Here is how I did it: (FYI I replaced my API key with 0s and update and itFailed are functions I have already declared)

function setpos(pos){ //Get info from openweathermap.org with position info
$.getJSON(“https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat="+pos.coords.latitude+"&lon="+pos.coords.longitude+"&units=imperial&appid=0000000000000000”).done(update).fail(itFailed);
}

Here is a link to my project if you want to take a look at a working example.
https://codepen.io/Josh5231/pen/BzNgwW?editors=0010

14 Likes

Ugh. I’m struggling as well. Every time I try and run my code, I get a response in the console (computer console, not codepens).
http://s.codepen.io/boomerang/4d4a2d3f93c28422a9f7b9f998bc68d71466535928180/api.openweathermap.org/data/2.5/weather?APPID=b11c7b33ce8e8e12ecf30c57a7083f5f&lat=(my actual lat)&lon=(my actual lon)
When I take copy and paste the API call, it shows up just fine. I took out the https, like a lot of people suggested, but maybe it still has something to do with that…

Here’s my code:

(Sorry it’s not cleaned up, was going to do that after I have it working)

don’t start address with ‘api’… and use’http://api instead’… maybe.

Just tried…still didn’t work. Thanks for the suggestion though.

If you make sure that you’re connecting to CodePen through non-secure HTTP, this code works well:

$(document).ready(function() {
  var url = 'http://api.openweathermap.org/data/2.5/weather?';
  var appID = 'b11c7b33ce8e8e12ecf30c57a7083f5f';
  var lat = '';
  var lon = '';

  $.getJSON('http://ip-api.com/json', function(loc) {
    //$('#data').html(loc.lon);
    lon = loc.lon;
    lat = loc.lat;
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?APPID=' + appID + '&lat=' + lat + '&lon=' + lon, function(weather) {
      console.log(weather)
      $('#data').html(weather.main.temp);
    });

  });

});

The problem is that anyone who connects via HTTPS isn’t going to get the weather, and furthermore it’s going to fail silently. That’s bad news. I want to love OpenWeatherMap, and while I understand their decision to block SSL connections for their free accounts, it sucks for students. Forecast.io has a free account option that caps out at 1,000 calls per day and will let you use HTTPS.

4 Likes

Would you suggest using an alternate geolocation API since there a browser compatibility issues with the example from the FCC exercise - navigator?

Functionally the code you provided is identical to mine, and it works, so I feel it might be more geolocation related than the Open Weather API. Is my assumption correct?

It’s mostly the same. I actually copied and pasted it from your code, but with minor modifications. Notably, I added the http:// before your URL to the openweather API. You can make that change yourself, or copy and past my copy of your code, but either way, if your browser connection is not SSL, it’ll work.

For geolocation, I suggest the native HTML API. To get a more exact location, I used Google’s geocoding API. Here’s an example call from a Node app I wrote:

https://maps.googleapis.com/maps/api/geocode/json?latlng=${currentPosition}&key=${apiKeys.mapsKey}
1 Like

Alright, I changed it now. Is that all you did was added an ‘http://’ to the front of that…I could have sworn I tried. I must have messed up somehow. Thanks. All down here from here hopefully.

Also, apologies Soirana for apparently not implementing your advice right.

Sorry, I didn’t realize what you had asked, who was asking, and who I was talking to.

I had already described your problem a few posts ago. You have only defined the variable position in the scope of the navigator.geolocation.getCurrentPosition callback. You’re trying to access it on lines 36 and 37, but once the function on line 30 completes, there’s no such thing as position anymore. Geolocation is working fine in your code.

Thanks for you continued assistance. I’ve reviewed one of your previous replies and made changes to my code. Like you, I’ve declared the lat and long variables at the beginning, and then assigned values after the geolocation request successfully retrieves those values. After which i use them as inputs into the weather API call function.

$(document).ready(function(){
var lat="";
var long="";
var weatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=***MYKEY***&callback=JSON_CALLBACK"; 
  
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      $("#geoLoc").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
       
      lat = position.coords.latitude;
      long = position.coords.longitude;
      $.getJSON(weatherURL).done(function(data){
     $('#currTemp').html("current temp: " + data.main.temp);
    });
       });
  }

I’m still having issues after changing the variable declaration and weather API call function reposition. I am getting error/alerts in CodePen, which I think is a simple matter of braces/semi-colons, but am having trouble finding it. Currently, in this state, the code is not pulling and printing the lat/long to the screen.

Thanks

I don’t know if this is related, but soon after I finished my weather app, it broke because Chrome stopped allowing non-https sites to request access to the client’s location data.

I haven’t tried out that code, but I’m already seeing a problem with your weatherURL. At the time it gets declared, lat and log are empty strings, so that’s what they’ll be in the URL string. Declare weatherURL after you get the geolocation data.

Line 44, you need to close your function with }). Then you’ll get another error. At least, I did, because it didn’t find my city.

Thanks for the tips, I’ve declared the URL variable after geolocation retrieves the lat and long values and added the “})” as suggested. I’m still getting a error/red exclamation in CodePen stating an “unexpected token ).” and says “Loading…”.

I think it’s the closure that’s preventing it from running. I’ve double-checked my function closures but still am stuck.

$(document).ready(function(){
var lat="";
var long="";
  
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      $("#geoLoc").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
       
      lat = position.coords.latitude;
      long = position.coords.longitude;
      var weatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=****MYKEY******&callback=JSON_CALLBACK"; 
      
      $.getJSON(weatherURL).done(function(data){
     $('#currTemp').html("current temp: " + data.main.temp);
    });
      });
  })
1 Like