I’m trying to make a weather app for Free Code Camp and I can’t get ajax to grab the url. I’m sure it’s something in how i’m creating the url but was curious if anyone could lend a helping hand/suggestion???
Really appreciate the assistance!!
$(document).ready(function(){
var Geo = {};
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error);
} else {
alert('Geolocation is not supported');
}
function error(){
alert("That's weird! We couldn't find you!");
}
function success(position){
Geo.lat = position.coords.latitude;
Geo.lng = position.coords.longitude;
}
var key = 'c7e3b3ac66e765aa';
var Weather = "http://api.wunderground.com/api/"+ key +"/geolookup/conditions/q/" + Geo.lat + "," + Geo.lng + ".json";
$.ajax({
url : Weather,
dataType : 'jsonp',
success : function(data) {
var location =data['location']['city'];
var temp = data['current_observation']['temp_f'];
var img = data['current_observation']['icon_url'];
var desc = data['current_observation']['weather'];
var wind = data['current_observation']['wind_string'];
$('#location').html(location);
$('#temp').html(temp);
$('#desc').html(desc);
$('#wind').html(wind);
$('#img').attr('src', img);
}
});
});
Use your console log to see what error you’re getting.
I get this on JSFiddle, I’m not sure if it’s the same thing you’re getting:
"error": {
"type": "querynotfound"
,"description": "No cities match your search query"
}
The reason is because you’re calling the success function, where the Geo is being set, before you call the ajax. You can fix that by wrapping the AJAX in a function and calling that after navigator.geolocation.getCurrent(). Then when you fix that, you’ll get the error “Please use POST”, so add the setting method:'POST' to your AJAX settings. Then I think it works.
Thanks for the suggestion. Are you referring to the ajax method as well??
here is my codepen I have been messing with. If i put the ajax cal in the success function i get 404 error and if I take it out I get an Uncaught ReferenceError. Is using a method like @mawburn “better” or more used than the get method (i’m clearly new to this and just using what I have learned so far) :).
Thanks for the help guys. I put the the key, weather and ajax in the success function and then fixed a couple other typos/issues I had and it’s finally pulling up the url and letting me parse through it.