0

Disclaimer:
I edited this post because another error occured after I switched from an API that did not support CORS to another API.

I am currently trying to build an app on codepen.io that displays the local weather based on the data from the geolocation of the user. I am using this API provided by OpenWeatherMap. The editor didn't show any syntax errors and I couldn't find one neither, so I assume I made a logical mistake in the AJAX request. I would really appreciate if someone could tell me where I went wrong: 

if (navigator.geolocation) {

  window.onload = function(){

    var currentPosition;
    function getCurrentLocation (position) {
      currentPosition = position;
      var lat = currentPosition.coords.latitude;
      var long = currentPosition.coords.longitude;

      $.getJSON('api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + "&appid=81621bf2bb3e08f0bfd40540baafb8ee", function(data) {
      $('#info').append('<p>' + data.weather[0].description + '</p>');          
      });      
    };     
  };

  navigator.geolocation.getCurrentPosition(getCurrentLocation);
}

<div class="main">
  <div align="center" id="info"></div>
</div>

I only provided the code I found relevant, but if you need the whole code you can follow the first link I included above.
Thanks for your advice and taking your time in advance :)

Jan Egbers
  • 37
  • 2
  • 7
  • whats the problem ?? please explain your problem – IbraHim M. Nada Jan 18 '18 at 09:18
  • and if u can please show me the network tab in google chrome developer console – IbraHim M. Nada Jan 18 '18 at 09:20
  • 1
    If you fix the problem you have with the use of `$.window.onload` (https://codepen.io/anon/pen/WdYZgd) then you have a CORS error, which is a much bigger problem. See the duplicate for more information. – Rory McCrossan Jan 18 '18 at 09:28
  • Thank you very much @RoryMcCrossan. I didn't know about the CORS problem, thanks for the link :) – Jan Egbers Jan 18 '18 at 09:49
  • @Ibrahim, sorry I am coming back so late to you. The problem was that I got a Cross-Origin Resource Sharing error. I switched to another API that does not have that problem, but now I got another problem. The app is still not working and does not display the weather. I think the problem is that I made a mistake in the AJAX request, but I don't know – Jan Egbers Jan 18 '18 at 11:57
  • can u please open the network tab in google chrome developer console and post here as screenshot – IbraHim M. Nada Jan 18 '18 at 14:02

1 Answers1

2

There's two main issues at hand here:

The first is this line:

$.window.onload

This piece of code is not doing what you expect ($.window is undefined), changing it to window.onload should fix that issue.

The second issue is more serious: you are getting a CORS (Cross-Origin Resource Sharing) error. It would seem MetaWeather does not allow cross origin requests (requests that originate in a domain and request data from a different one, e.g. codepen.io --> metaweather.com).

This can usually be solved through JSONP callbacks (which MetaWeather does not support either), proxying your request (e.g. Nginx) or setting up your own backend API (with Node.js for example) and doing the call through that API.

Here's a sample app tutorial that tackles a very similar project to the one you are trying to code using the OpenWeatherMap API which will let you do the API request from the browser.

Gorka Hernandez
  • 3,890
  • 23
  • 29
  • Thanks a lot. I didn't consider the _window.onload_ problem lol. But thanks for the information on CORS, this was new to me. I'll take a look at your app :) – Jan Egbers Jan 18 '18 at 09:44
  • 1
    @JanEgbers You may find that some of the code is a bit old and may be obsolete, but the logic behind it should still be sound. – Gorka Hernandez Jan 18 '18 at 09:50
  • Alright I read through your article and even though it's great, I tried to use that information to fiddle around with the OpenWeatherMap API in jquery. Unfortunately it still does not work. Sorry to bother you, but do you have any idea why that is? My guess is that I still messed up somewhere in the AJAX request. I am sorry, I am a beginner :D – Jan Egbers Jan 18 '18 at 11:53
  • @JanEgbers Keep in mind that to use the OpenWeatherMap API you will need to get your own API key. If you have further questions feel free to reach out to me via private message with a link to your codepen. – Gorka Hernandez Jan 18 '18 at 14:50