Weather App - Weather API callback not working

Stomper · June 17, 2016, 2:10am

I’ve been wracking my mind for ages as to why the Weather API is still not working. I am using similar syntax as the geolocation API, and that is rendering just fine. At this stage I’m just trying to ensure I can pull the data in correctly, after which I will start on the styling and frontend.

Thanks

My HTML

<html>
  <head>
      <meta charset="UTF-8">
      <title>Today's Weather</title>
  </head>

  <body>
    
   <p id="geoLoc"></p>    
     
    <p id="currTemp"></p>
      
  </body>
</html>`

And my JS

//geolocation via freecodecamp exercise
$(document).ready(function(){
if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      $("#geoLoc").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
    });
}

//jquery current weather via openweathermapp
var lat = position.coords.latitude;
var long = position.coords.longitude;
var weatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=****MyKEY****";
$.getJSON(weatherURL).done(function(data){
     $('#currTemp').html("current temp: " + data.main.temp);


  });
});

PortableStick · June 17, 2016, 4:22am

Are you showing any errors in the console? Are you developing locally or on CodePen?

JohnLaloli · June 17, 2016, 5:39am

There where 2 main problems I found using openweathermap for mine. First you need to include an api key in the URL otherwise calling from a different domain is rejected, you can get that by signing up for free on their site. The other problem was that it wouldn’t work if I was making the call from a HTTPS site. I’m not sure how to solve this problem though so if any one has I would appreciate being pointed in the right direction. For now I’m just detecting that the site is loaded over HTTPS and displaying a message to say it wont work with it.

This thread is also related to the problems: http://forum.freecodecamp.com/t/im-confused-with-all-the-json-jsonp-localhost-and-cors-concepts/11365/2

Soirana · June 17, 2016, 10:17am

Well, it’s not exactly JSON/JSNOP problem ([for seeing API side] (https://openweathermap.desk.com/customer/portal/questions/8166727-http-to-https?t=535697)). They insist that https services are for commercial use only.

IIRC, I’ve tried few methods of crossloading and failed. However, you are asked to build functionally similar website and FCC example does not work if loaded through https either.

p.s. I would suggest using http://www.apixu.com/api.aspx, it has limit of uses (5k/month for rfee key) but serves through https.

Stomper · June 18, 2016, 5:31pm

Thanks for all your feedback thus far.

I am currently developing in CodePen, and it doesn’t appear to have any console errors. I’m aware that the geolocation code does not work in Chrome but does work in FireFox, Opera etc.

I do have an API key set up for Open Weather, and have successfully tested the URL (sans variables etc.) in my browser window and it does pull localized weather data.

Is there anything wrong with my JS code? I’ve been staring at it for days and I’m still stymied.

Thanks

PortableStick · June 19, 2016, 3:23am

Post a link to your project for many helps.

Stomper · June 19, 2016, 5:07pm

This is the CodePen for the project.

Appreciated

PortableStick · June 19, 2016, 6:33pm

To debug promises, make sure you have a .catch() at the end of your promise chain. This was illuminating:

$.getJSON(weatherURL).done(function(data){
     $('#currTemp').html("current temp: " + data.main.temp);

  }).catch(function(error) {console.error(error)});

});

This showed me

The first error is fixed by switching the order of jQuery and Bootstrap in your CodePen’s JS declarations. The second error is just because you haven’t defined position anywhere in the promise’s scope.

Josh5231 · June 19, 2016, 11:54pm

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.

Stomper · June 21, 2016, 2:15am

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?

Stomper · June 21, 2016, 2:17am

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?

mkarabashev · June 21, 2016, 2:47am

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.

PortableStick · June 21, 2016, 2:49am

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.

Stomper · June 21, 2016, 2:52am

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";

Josh5231 · June 21, 2016, 4:06am

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

michaelkoska · June 21, 2016, 7:24pm

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)

Soirana · June 21, 2016, 7:46pm

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

michaelkoska · June 21, 2016, 8:39pm

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

PortableStick · June 21, 2016, 9:50pm

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.

Stomper · June 22, 2016, 2:09am

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?