Show the Local Weather - can't use geolocation API on insecure server (codepen.io)

JavaScript
23

I think the problem is that forEach is an Array method, and the json callback you receive is an object. One option is to use the Jquery alternative, $.each which works on objects ! Good luck

24

Hi,

Thanks for taking the time to reply. I followed searched the net and got a crash course in json, {objects} and [arrays] so kinda understood why you suggested $.each… My code is currently on my local computer now and not yet on codepen… I try to simulate how I’d do it in the “real world” first before delving into actual codepen since the site has a few quirks and I’d like to rule out that my difficulties are more from the codepen platfrom rather than my own errors in the script.

So far here’s what I’ve been able to do:

$.getJSON("http://ipinfo.io/json", function(json){

				//TEST IF JSON is recieved
				//$("#weatherCurrent").html(JSON.stringify(json));  //THIS usually WORKS by the way
			    
				//THIS IS TO SHOW THE JSON first as console.log to check if I really got it and then as HTML		 				
				$.each(json, function(key, value){
					console.log( key + ": " + value);
					html += "<div id = 'weather' class = 'weatherVal'>";
					html += key + ": " + value;
					html += "</div><br>";
					});				
			
				// THIS IS TO REPLACE THE class message with the html detailed by the javascript
			        //$("#weatherCurrent").html(html);

I kind of comment things out first to check the code step by step.

so first I comment out all the code except for the one where I just stringify the json.

then I comment that out and try the console log to see if that works.

then final step I comment out all the above and see if I can convert the json to html. I actually made it this far and showed all the data on my local site as html.

Now my question is how to filter out the location data I need and pass it off to my script for the weather.
I tried the

 json = json.filter(function(val){
             return (val.id == <!--the index of the data-->);
                           });

but i got a json filter is not a function so I suppose that json.filter again works on arrays not objects?

I tried setting

var loc =

to either of

json[<!--the index of the data-->]

or

json[<!--"location property of the data"-->]

then used

console.log(loc);

but the console din’t print out anything…says the var loc is undefined.

any suggestions? Thanks again.

I’ll try to put the partial code on to codepen for you to see what I’m doing wrong.

thanks again

1 Like
25

Hi just wanted to update my post.

It works now for some reason.

I was able to print out the location using console.log.

Plugged it into the script for the weather api.

Could be the lousy internet connection in my area. I might try downloading the local json file to my local computer to rule out the internet speed as a source of the problem. Thanks again to everyone… Now back to designing…

26

Hi guys,

I tried many ways, but I can’t get the location from freegeoip. Tried other websites but it is the same.

In the console, I get http://freegeoip.net/json/ Failed to load resource: net::ERR_BLOCKED_BY_CLIENT.

Any idea? Thanks in advance.

$.getJSON("http://freegeoip.net/json/", function( data ) {
      var items = [];
      $.each( data, function( key, val ) {
        items.push( "<li id='" + key + "'>" + val + "</li>" );
      });
     
      $( "<ul/>", {
        "class": "my-new-list",
        html: items.join( "" )
      }).appendTo( "body" );
    });
27

Are you working locally ? If i’m correct, JSON, or AJAX calls are forbidden (at least on Chrome).

28

Type http://codepen.io in your browser, then browse to your pen that does the API call. It automatically goes to https. That worked for me.

29

Sounds like you have some extension or add on in Chrome blocking it.

30

Hi guys,

Thanks a lot for your time.

It appears that there was a double problem:

  1. I used AdBlock, which apparently was blocking the call.
  2. It didn’t solve the problem alone however, cause I had to use @gabrielroacueto’s trick to make it work.
31

Thank you for this! Huge lifesaver.

1 Like
32

Just finished the “show local weather” project.

At first the navigator.getGeolocation didn’t work, because my chromium browser needs an https call to get the coords. With ip-location, my location was shown about 600 km south from where I live, so it was not the same weather as here.

I then struggled a bit with asynchronous calling (which I am not used to before): I didn’t want to nest my two function calls but this was bad, because the open weather api was called before the location call has updated the coords.

But with https, the open weather api didn’t work. So I use a proxy I can call with https to get the open weather data. It’s even harder to get the weather icon as image with https but I finally managed it.

show local weather

33

Your code really helped me to understand how to make this project. I should confess that many things I just took from your code and put into mine.

34

Thanks! It did the trick!

35

You can fix this problem changing your codepen link. Change https for http.

36

I find both of these give me a location that is a lot further south then my current location. They are not accurate enough. My only real option is to use the GeoLocation method and use HTTPS with codepen?

37

My weather app has worked for 2 days using the Geolocation API before getting the mixed content problem on Codepen. I’ve now switched to freegeoip.net and it’s working again. However, the location doesn’t seem to be as accurate as using the geolocation API, but it’s acceptable nonetheless. Thanks for the info ::smiley:

38

Hi Guys,

This caused me many hours of frustration.

If you still want to use the Geolocation API instead of using the IP tracking sites it was recommended to me by another user to use the CrossOrigin CORS Proxy.

This Proxy allows you to successfully share data between HTTP and HTTPS sites.

Append the CrossOrigin URL before your weather API url.

For example: https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=b1b15e88fa797225412429c1c50c122a1

Also, when using CodePen, ensure you are accessing it via HTTPS://

Hope this helps!

5 Likes
39

Hey Nims, your solution with crossorigin.me + accessing codepen via https is by far the better in my case. I didn’t have to rewrite all the application (finished a long time ago), thanks to your trick. I owe you one! Thanks a lot, Donatien.

2 Likes
40

No problem, I’m glad I could be of assistance. The community for FreeCodeCamp is great!

41

This worked like a charm!

1 Like
42

I have spent so many hours trying to figure this out. I just can’t do it. I’ve even copied several people’s codes, and tweaked and tried countless combinations to get the damn geo location data.

Can someone just tell me how to do it? I can figure out everything else on my own, I’m just tired of wasting my time trying to figure this out. I have tried every suggestion in this thread, and I keep getting errors. This challenge has driven me insane.