I’m working on the weather app, but my browser, firefox won’t provide any location data. Don’t know why, I don’t have it disabled, and I set allow and remember but continually get “location information is unavailable”.
Ok, so I thought, if it doesn’t work on my computer chances are it won’t work on others, so if I want to have it on my portfolio it needs to actually work for whoever tries it out. Thus I need to request a zip code if I can’t get the location data and get the lat and lon from the zip code.
i’ve tried .get, i’ve tried .ajax, i’ve tried .getJSON, but NONE of them work. As far as I can tell I get no response. I know however the server is responding because if I just put the request link in the browser i get the expected json output. So I’m completely baffled as to why my code isn’t seeing it. What am I doing wrong?
I’m not sure if you are strictly building this locally or in Codepen, but I had issues with this too. If you bring up the Console in DevTools you’ll see that you have an error. It’s a Mixed Content issue, the API you are using for the zip codes are loading insecurely (over HTTP). Codepen & Geolocation throw a fit when it’s not HTTPS.
Two options:
1.) Write a new XMLHttpRequest OR,
2.) Find a new zipcode API that uses HTTPS.
When troubleshooting the Chrome DevTools will seriously help you figure out what’s going on in your code. Hopefully this helps you out, you’ve got this.
The problem is that codepen is secured (https) but you are trying to access the api unsecured (http). In this case, the api will handle both so just change the api url to https.
In general, that browser console is a very powerful tool. This is only 1% of what it can do.
For example, instead of using alert to see the api result, I’d use console.log, that way you can examine what’s in the object. The console is a great place to check for errors and quickly see data.
A simplified version of your code might be:
var key = "QNK59CW5EM79D88Y4IZ3";
var reqURL = "https://api.zip-codes.com/ZipCodesAPI.svc/1.0/QuickGetZipCodeDetails/";
var zip = "03038";
var reqURL += zip + "?key=" + key;
$.getJSON(reqURL, function(data) {
console.log(data);
});
But it seems like you are getting the info from the user? There are other ways to get lon and lat other than navigator.geolocation. There are other APIs, for example:
Can’t thank you two enough!! I was banging my head against this for two nights strait!
Noted, I’ll start using the console a lot more. It’s a bit overwhelming. I’m on Firefox, there is a browser console and web console. Looks like web console is what I want? I see the error you mention in that console, and I can also see the console.log content there.
Yeah so my intent was to make it so that if I can’t glean the users location, I’ll simply ask them for their zip, which I can then convert to lat and lon, and then supply the weather info.
It would also make the app a bit more useful since you can check the weather for other location.
Can’t thank you two enough!! I was banging my head against this for two nights strait!
Been there, done that. Don’t worry, in a few months, you’ll be the one helping the younglings out.
I’m on Firefox, there is a browser console and web console. Looks like web console is what I want?
I don’t know Firefox. I was once told Chrome is best for developers, but I’ve also heard other people rave about Firefox, so I guess their both good. There’re probably both strong in their own way, with a lot of overlap. I should check it out.
From Firefox’s docs, “The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.” So, that’s the difference. I guess that would make Web Console a little more specific.
Yeah so my intent was to make it so that if I can’t glean the users location, I’ll simply ask them for their zip, which I can then convert to lat and lon, and then supply the weather info.
It would also make the app a bit more useful since you can check the weather for other location.
That’s a different approach than most people do, but it fulfills the user stories so I guess that’s find.
Quick tip: if you want your request to work with your HTTP URL on a HTTPS site (i.e. Codepen), save the JSON contained in your API as a json file on a repository in your Github account, then create a URL that points to it. Github will give you a secure URL. For example, I created this https://soupedenuit.github.io/json-quotes/Random-Quotes.json so I could use it in my Random quotes project so that it works everywhere. By “create” I mean I copied it from http://quotes.stormconsultancy.co.uk/popular.json.
I think most people automatically get the user’s location and use that. I think most don’t have the option to select a different location.
But what you are suggesting fits with the stated requirements so go for it. Just beware of “feature creep”, the tendency to keep adding cool features that grow and grow until the project is unmanageable. But I usually tried to add one thing that wasn’t in the example or the user stories. Just don’t get carried away. But what you’re suggesting sounds pretty straight forward, so go for it.