Using a variable as the URL in getJSON jquery

Question

I am creating a weather app using jquery. The issue that I am having is in my getJSON I would like to use a variable that I have created using your current latitude and longitude coordinates. The url with my openweather api key loads the json file just fine in the browser but it does not seem to want to work in my getJSON.

Here is my javascript code to display the weather information based off your location.

var lat;
var lon;
var jsonURL;

  navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
    lat = location.coords.latitude;
    lon = location.coords.longitude;

    jsonURL = 'api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&APPID=example&units=imperial'

}



$("#getWeather").click(function(){
  console.log(jsonURL);
    $.getJSON(jsonURL , function( data ) {
    var items = [];
    items = data;   $("#weather").text(items.main.temp).append('&#8457;');
    });
});

Please remove any sensitive data like your APPID.

dokgu
– dokgu

2016-02-22 21:43:29 +00:00
Commented Feb 22, 2016 at 21:43 — dokgu
– dokgu, Commented Feb 22, 2016 at 21:43

Quentin · Accepted Answer · 2016-02-22 21:40:56Z

3

Use the developer tools in your browser. Look at the Console. Look at the Network tab. That would make it clear that your URL is resulting in a 404 error.

Your URL is missing the scheme. It needs http:// or https:// on the front.

Browsers will insert http:// automatically when you type a URL (that is missing the scheme) into the address bar.

answered Feb 22, 2016 at 21:40

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jmcgriz · Accepted Answer · 2016-02-22 21:37:15Z

0

It's possible that the api isn't set up to work with requests directly from javascript, frequently you need to write a service on the serverside to communicate with the api, and make your AJAX request to that service instead of directly to the api. Cross-domain AJAX requests are blocked by default in browsers

answered Feb 22, 2016 at 21:37

jmcgriz

3,3981 gold badge11 silver badges16 bronze badges

Comments

Simon Davies · Accepted Answer · 2016-02-22 22:12:18Z

0

Actually as mentioned change your url to include:

    jsonURL = 'http://api.openweathermap.org/data/...'

And also make it 'JSOP' format so:

        $("#getWeather").click(function() {
          $.getJSON(jsonURL, {
              format: "jsonp"
            })
            .done(function(data) {
              console.log(data);
            }).fail(function(jqxhr, textStatus, error) {
              var err = textStatus + ", " + error;
              console.log("Request Failed: " + err);
            });
        });

edited Feb 22, 2016 at 22:12

answered Feb 22, 2016 at 22:05

Simon Davies

3,6949 gold badges45 silver badges71 bronze badges

1 Comment

Dallan Baker Over a year ago

thanks for that but it doesn't need to be jsonp in this case

Collectives™ on Stack Overflow

Using a variable as the URL in getJSON jquery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related