Serious doubts on my Local Weather Project, need help :/

Serious doubts on my Local Weather Project, need help :/
0

#1

Hi guys… So I’m having a lot of trouble to get my javascript to work… I came to this project with a lot of confidence and I thought I could make a nice page with a lot of study… I was wrong. I can’t seem to have the knowledge to make this project go and maybe I need to study more JS and JQuery…

Here’s my work in progress: https://codepen.io/JNuno007/pen/rrNEOV

I must say it only works using the HTTPS prefix…

Can you guys help me solve my code out? I’m stuck in here for three days and can’t figure it out…

If it is all wrong please tell me, because I think I need to study a lot more to understand JavaScript.

Did you guys felt something like this when you started to work with this project?

Sorry about my english, it is not my native language.

Best regards to you all my friends,

João Ferreira


#2

Usually when I get stuck it’s because I tried to do too much in one try. I saw you were retrieving the lat/long, that seems to be ok. So what part isn’t working? Is the data being retrieved (does it display as you expect in console.log statements)? Or, have you gotten that part to work, but you can’t display it? try to break the functionality down into as small a piece as you can, then it’s easier to solve problems as they come up, because there’s only one or two rather than a whole bunch.


#3

Thank you very much, your reply was very kind. I’m gonna try to understand and split into parts that javascript, use more comments area to know what “I’m doing”.

Also I will learn more about API’s and how do I use their data and show their data the way I want.

Thanks for the motivation! :slight_smile:


#4

I had some trouble with the weather project as well, took me awhile to understand how to get the location info without having errors.

I saw you are using info.io in your geolocation function, but when I tired to find it, it said the site didn’t exist? So maybe you have a typo in your url? Or since you have the lat and lon, you can use those directly in your call to openweathermap, as they accept parameters for lat and lon.

The site I ended up using for my project that was suggested by other campers was FreeGeoIP, if you call that site in your get request ( try https://freegeoip.net/json/?callback in order to get JSONP returned to avoid the errors with JSON) it should have all the data you need. And if you have a JSON formatter extension for your browser like JSON Formatter you can see the data in your browser and what you need to access it.

Another thing I had issues with was the crossorigin errors so I used cross origin me to help with that.

Otherwise I agree with @yuzu-r, splitting things up into smaller parts helps a lot. I like to write comments for each step I need to do before I start doing any coding, so I can focus on getting one part working at a time.


#5

Thank you very much for the tipps! I’ll go check FreeGeoIP and cross origin me tomorrow, I think I’ll study a little more, erase my JS code and do a step-by-step code.

Thanks for your reply :slight_smile:


#6

Thanks, sonorangirl, for the tip on FreeGeoIP! That solved my cross origin problems with ipinfo.io (probably what João actually meant. The problem with ipinfo.io is that is is HTTP only unless you pay to be able to use HTTPS. If you use crossorigin.me with that then it gets the ip address of crossorigin.me, which appears to be in New York, so the call always returns the info for that New York IP, not your actual location. Having a geolocation API that allows HTTPS eliminates the issue entirely.

Thanks, again!


#7

Well marcnshapiro that was one problem yes, but more important, I’m a little confused about the code structure… I guess I need to study more about functions and their structure, I don’t understand after I get my IP how can I use the openweather API to show the information I want from them in the IP’s location…


#8

The open weather api URL to get the weather given the lat/lon is:
api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}
so, you want to store the lat/long you get and pass that into the open weather api.
To do that you could build a url string with the lat & lon built into it each time, like

var url = 'http://api.openweathermap.org/data/2.5/weather?lat='+myLat+'&lon='+myLon;
and pass that to your json or ajax call.
Or, you can use the data: parameter that will build the url from a “base” url and additional data, like this:
$.ajax({
url: "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather",
data: {lat: myLat,lon: myLon}
...etc
and the full url is automagically built from the parameters in “data” and sent in the proper format.
Getting this part is the hardest step of this app because there are mutliple ways to make it work, so googling for help on it can get you all kinds of answers. Someone posted a link to some json/api videos today, that might help you.
Hope that helps, but anyway, keep going…


#9

Nice explanation!!! Thank you very much :smiley: I think I understand what you’re saying. I’ll try this now. Thanks yuzu-r