Question

I'm making a "show-you-local-wather-app"(freecodecamp), and I want it to get the data on page load. But nothing happens. I quite new at this so I'm wondering if I've missed something obvious.

It works just fine if I put it inside $("#some_button").on("click", etc...

I've tried putting it inside $(document).ready without any succes. What am I missing here?

var latitude, longitude;
var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f";
var url;

function success(pos) {
    var crd = pos.coords;
    latitude = crd.latitude;
    longitude = crd.longitude;
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey;
};

navigator.geolocation.getCurrentPosition(success);

// AJAX call

$.getJSON(url, function(data) {
    $("#location").html(data.name + ", " + data.sys.country);
    $("#weather_type").html(data.weather[0].description);
    var imgURL = data.weather[0].icon + ".png";
    $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>");
    $("#deg").html(data.main.temp);
    $("#windspeed").html(data.wind.speed);
    console.log(data);
});

I've made it with codepen if anyone want to see it. I'm using the OpenWeatherMap API.

Thanks!

Answer 1

Here is better solution, If your navigator.geolocation.getCurrentPosition(success) successfully returns then run runner() function.

Here is quite simple examples Cordova Doc

$(document).ready(function() { 
var latitude, longitude;
var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f";
var url;

function success(pos) {
    var crd = pos.coords;
    latitude = crd.latitude;
    longitude = crd.longitude;
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey;

    runner(url);
};

navigator.geolocation.getCurrentPosition(success);

// AJAX call
 function runner(url){
  $.getJSON(url, function(data) {

    $("#location").html(data.name + ", " + data.sys.country);
    $("#weather_type").html(data.weather[0].description);
    var imgURL = data.weather[0].icon + ".png";
    $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>");
    $("#deg").html(data.main.temp);
    $("#windspeed").html(data.wind.speed);
    console.log(data);
  });
}; //end of runner

}); //end of document.ready

Answer 2

Your code issues the $.getJSON call before you've got the coordinates in hand. You need to wait until you have the coordinates, and then fire the ajax call. Notice where ajaxCall gets invoked in the code below:

var latitude, longitude;
var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f";
var url;

function ajaxCall(url) {
  $.getJSON(url, function(data) {
    var imgURL = data.weather[0].icon + ".png";
    $("#location").html(data.name + ", " + data.sys.country);
    $("#weather_type").html(data.weather[0].description);
    $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>");
    $("#deg").html(data.main.temp);
    $("#windspeed").html(data.wind.speed);
  });
}

$(document).ready(function(){

  function success(pos) {
    var crd = pos.coords;
    latitude = crd.latitude;
    longitude = crd.longitude;
    url = (
        "http://api.openweathermap.org/data/2.5/weather" +
        "?lat=" + latitude + 
        "&lon=" + longitude + 
        "&units=metric" +
        "&appid=" + apiKey
    )
    ajaxCall(url);
  }

  navigator.geolocation.getCurrentPosition(success);
});

It's sitting inside of the success function—so it can't fire until the data is available.

Answer 3

Ok, so I did it like this and now it works. I guess in principle it's the same as the answer from 7urkm3n?

function success(pos) {
    var crd = pos.coords;
    getPos(crd.latitude, crd.longitude);
};

navigator.geolocation.getCurrentPosition(success);

function getPos(latitude, longitude) {
    var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f";
    var url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey;

    // AJAX call
    $.getJSON(url, function(data) {
        $("#location").html(data.name + ", " + data.sys.country);
        $("#weather_type").html(data.weather[0].description);
        var imgURL = data.weather[0].icon + ".png";
        $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>");
        $("#deg").html(data.main.temp);
        $("#windspeed").html(data.wind.speed);
    });
}

Answer 4

My guess to why $.ready doesn't work, when the DOM is ready, $.getJSON is still fetching from the external API.

But here's an alternative

Using setInterval

To stop it after running a set number of times, just add a counter to the interval, then when it reached that number it stops.

var latitude, longitude;
var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f";
var url;

navigator.geolocation.getCurrentPosition(function (pos) {
    var crd = pos.coords;
    latitude = crd.latitude;
    longitude = crd.longitude;
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey;
});

// AJAX call
var timesRun = 0;
var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 2){
        clearInterval(interval);
    }
    $.getJSON(url, function(data) {
        $("#location").html(data.name + ", " + data.sys.country);
        $("#weather_type").html(data.weather[0].description);
        var imgURL = data.weather[0].icon + ".png";
        $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>");
        $("#deg").html(data.main.temp);
        $("#windspeed").html(data.wind.speed);
        console.dir(data);
    });
}, 2000);

jQuery.getJSON() not working on page load. Works fine inside a click event

4 个答案: