Weather App - Weather API callback not working

JavaScript
41

Yes, @Kimon, I agree - it should be noted in the instructions for the challenge.

2 Likes
42

The chrome inspector says that you have a cross origin problem because your codepen is on https: and your api is trying to go to http:

You can either change the codepen to http, or change the api to the secure server if it has one.

43

Thanks a lot Josh, I had the same issue, fixed with adding “https://cors-anywhere.herokuapp.com/” as you said. :slight_smile:

44

Glad to help. One note though, Since I posted that, cors-anywhere has put stricter limits on its use and if your using codepen, it counts all traffic from codepen as one site so it quickly reaches its limit somedays. If it starts giving you problems you may want to find a different CORS server, there are plenty of them out there. They also give you instructions on how to set one up your self but you will need to be comfortable with working on backend projects for that :slight_smile:

45

Hi there!
I’m having an issue with adding the lat/long coordinates into the API call URL.

I’ve taken some of the tips here and declared the URL variable after retrieving the lat/long values, and when I check to see whether I got the values (using my handy test button and text) they are displayed just fine.

However, when I try to add them to my URL variable and check the URL, they come back as undefined (or " ", if I declare them as such in the beginning).

Does anyone know what the issue could be?

Code as follows:

$(document).ready(function() {
//Variables
var locLat;
var locLon;
var baseUrl = “http://api.openweathermap.org/data/2.5/weather?”;
var appId = “”;

//Get location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
locLat = parseInt(position.coords.latitude);
locLon = parseInt(position.coords.longitude);
});
};

var weatherUrl = baseUrl + “lat=” + locLat + “&lon=” + locLon + “&APPID=” + appId + “&jsonp=?”;

//Testing area
$(“#test-btn”).on(“click”, function(){
$(“#test-text”).text(weatherUrl);
});

})

46

Hi Josh,

I noticed that your code is able to run in chrome. I was just wondering how you did this. I can get the position using getCurrentPosition in Firefox, but It won’t get anything in Chrome for me at least.

Thanks,

Ben

47

Hey its doing that because chrome blocks it if your not using https. Take a look at my other post on this forum about using a CORS server

48

Hi Josh, thanks for the reply. I understand that part, but the thing is I can’t even get the Lat and Long values in Chrome, using the if navigator.geolocation functions. It works fine in Firefox though. Is there something I am missing?

49

I can’tell be sure without looking at your code. If you post a link I will take a look. Also are you getting any kind of errors or warnings showing up in the developer tools log?

50

Right now, all I want to do is get the variables to be shown in the console.

http://codepen.io/bennibee23/pen/RKOZOz

51

it could be something wrong with my browser, when I tried to run if from this chat, it asked for location permission, not it doesn’t do it when I am at the actual code pen page

52

Also, Is there an advantage in keeping the functions outside the document.ready section?

53

Theres no advantage to declaring your function outside the document.ready in this case. It just looks cleaner. I will look over your code when I get off work tonight, and let you know what I figure out.

54

Ok so it took me a while to figure it out, but the problem seems to be with your “External JavaScript” links. I removed them all and then just put JQuery back in and it worked. I’m not sure why but thats what it is. I made a fork with the working version here: https://codepen.io/Josh5231/pen/wJMQOQ?editors=0011

55

Thanks, for taking the time to look over my issue, it’s been frustrating me for some time now. I gave re-entering the external links a shot, but it didn’t work. I do notice that when I open your code in chrome, the code pen is considered “secure”, but when I try it on my profile, the page is considered “insecure”. Any idea why that is?

56

Hi Josh, I feel very foolish right now, when I opened codepen, I had http instead of https. so the page was considered insecure. Thanks again for your insight to this challenge.

57

@Josh5231 Thank for your ideal, it’s work !

58

Thanks man! It really solved my problem with both the weather app and the quote machine. Thanks a lot!

1 Like
59

Hello , my api call didn’t work. here is js

$(function(){
var C=false;
var apiData;
backgroundImg=[‘https://cdn.pixabay.com/photo/2016/06/13/22/12/flash-1455285_960_720.jpg’,
’ https://cdn.pixabay.com/photo/2013/12/09/13/45/waterfall-225961_960_720.jpg’,
‘http://images.all-free-download.com/images/graphiclarge/drops_rain_glass_220210.jpg’,‘http://wallpaper-gallery.net/images/snow-wallpapers/snow-wallpapers-1.jpg’,‘http://images.all-free-download.com/images/graphiclarge/winter_fog_200960.jpg’,‘https://previews.123rf.com/images/tolokonov/tolokonov1208/tolokonov120800059/14889692-Sky-and-ocean-Abstract-natural-backgrounds-Stock-Photo.jpg’,'https://cdn.pixabay.com/photo/2015/12/25/13/03/sky-1107579_960_720.jpg’

]
function displayTemp(F,C){
if©
return Math.round((F-32)*(5/9)) +‘° C’;
return Math.round(F) +‘° F’;

}

$.getJSON(‘https://freegeoip.net/json/’).done(function(location){

// console.log(location);
$(’#country’).html(location.country_name);
$(’#city’).html(location.city);
$(’#latitude’).html(location.latitude);
$(’#longitude’).html(location.longitude);

$.getJSON(‘http://api.openweathermap.org/data/2.5/weather?lat=’+location.latitute+’&lon=’+location.longitude+’&units=imperial&appid=d99414c365ff0845c676431520203ea0’, function(data){

apiData=data;
console.log(apiData);
})
})

})

Can anyone help me please?

60

Thanks! This really helped me, but with repl.it and not codepen. When I tried this in codepen there was no change, but in repl.it it worked brilliantly. :smile: