Accessing data outside of ajax request

Question

I'm trying to get the longitude and latitude I called in via ajax into their own variables so that I can use them in the request I'm going to make the the DarkSky API. I'm aware of them being local, and so can't be accessed outside of the ajax function, but I can't for the life of me work out a way around it. Here's my code:

$(document).ready(function() {

  //location API

  $("#myweather").load("window",function() {

    $("#location").fadeOut(function() {

      $.ajax({
        async: false,
        url: "https://geoip-db.com/jsonp",
        jsonpCallback: "callback",
        dataType: "jsonp",
        success: function(loc) {
          $("#location").html(loc.city)
          var long = loc.longitude
          var lat = loc.latitude
          }        
      });
    }).fadeIn();
  });      

      $("#result").load("location", function() {
        $("#result").fadeIn(function() {
          $.getJSON("https://api.darksky.net/forecast/15f8bf5641489ec32f66662221933c14/" + lat + long, function(forecast) {
            consolelog(forecast);
          });
        });
      });
});

Your AJAX `success` function should call whatever code it is that loads `result`. Basically you want to be saying "get this thing from geoip, then use that to load this result". — Niet the Dark Absol, Jul 03 '17 at 15:08
why not turn the .load function into a $.fn.function and then call it in the success callback? — treyBake, Jul 03 '17 at 15:09

score 1 · Answer 1 · answered Jul 03 '17 at 15:12

Try this:

$(document).ready(function() {

  //location API

  $("#myweather").load("window",function() {

    $("#location").fadeOut(function() {
      $.ajax({
        async: false,
        url: "https://geoip-db.com/jsonp",
        jsonpCallback: "callback",
        dataType: "jsonp",
        success: function(loc) {
          $("#location").html(loc.city)
          var long = loc.longitude
          var lat = loc.latitude

          $("#result").load("location", function() {
            $("#result").fadeIn(function() {
              $.getJSON("https://api.darksky.net/forecast/15f8bf5641489ec32f66662221933c14/" + lat + long, function(forecast) {
                consolelog(forecast);
              });
            });
          });
        }
      });
    }).fadeIn();
  });
});

If you declare lat and long outside of the ajax call, it will be available to the other function, but it may not be loaded when $.getJSON is called.

I prefer your answer over others as you explained _why_ and no one else did. — GrumpyCrouton, Jul 03 '17 at 15:30
This makes more sense, but it still doesn't return anything? — Epic Triffid, Jul 03 '17 at 19:19

score 0 · Accepted Answer · answered Jul 03 '17 at 15:10

0

You should declare these two variables outside the function like shown below:

$(document).ready(function() {

  //location API
    var long = '';
    var lat = '';
  $("#myweather").load("window",function() {

    $("#location").fadeOut(function() {

      $.ajax({
        async: false,
        url: "https://geoip-db.com/jsonp",
        jsonpCallback: "callback",
        dataType: "jsonp",
        success: function(loc) {
          $("#location").html(loc.city)
          long = loc.longitude
          lat = loc.latitude
          }        
      });
    }).fadeIn();
  });      

      $("#result").load("location", function() {
        $("#result").fadeIn(function() {
          $.getJSON("https://api.darksky.net/forecast/15f8bf5641489ec32f66662221933c14/" + lat + long, function(forecast) {
            consolelog(forecast);
          });
        });
      });
});

answered Jul 03 '17 at 15:10

Himanshu Upadhyay

6,558
1
20
33

This only returns a ' ' in the console when i log it, as if its not being passed across? – Epic Triffid Jul 03 '17 at 17:53
It also depends upon where you are using console. Can I see that code ? – Himanshu Upadhyay Jul 03 '17 at 17:59
@EpicTriffid, I did not find console.log in the code with the above given link. – Himanshu Upadhyay Jul 03 '17 at 19:12
Sorry, try again! – Epic Triffid Jul 03 '17 at 19:18
But @EpicTriffid you are trying to console forecast variable. Not lat long. The question was about lat long variable not accessible. So my answer to your question is perfect. You may up vote and accept this answer. I am looking for your issue meanwhile. – Himanshu Upadhyay Jul 03 '17 at 19:24
@EpicTriffid, here is your solution for your 2nd query too: Change your javascript code like this: `function(forecast){ $.each(forecast, function(i, field){ console.log(field); }); });` – Himanshu Upadhyay Jul 03 '17 at 19:31
@HimanshuUpadhyayit does work! Why though? – Epic Triffid Jul 03 '17 at 19:37
@EpicTriffid because it responds with JSON data, and you need to loop through JSON data to iterate each object. – Himanshu Upadhyay Jul 03 '17 at 19:39
@EpicTriffid hope my all efforts were helpful to you. :-) – Himanshu Upadhyay Jul 03 '17 at 19:50
@EpicTriffid, can you please accept the answer and vote it up ! – Himanshu Upadhyay Jul 03 '17 at 20:27

score 0 · Answer 3 · answered Jul 03 '17 at 15:11

Try:

$(document).ready(function() {
    var long, lat;

    //location API
    $("#myweather").load("window",function() {

        $("#location").fadeOut(function() {
           $.ajax({
               async: false,
               url: "https://geoip-db.com/jsonp",
               jsonpCallback: "callback",
               dataType: "jsonp",
               success: function(loc) {
                   $("#location").html(loc.city)
                   long = loc.longitude
                   lat = loc.latitude
               }        
          });
      }).fadeIn();
  });      

    $("#result").load("location", function() {
        $("#result").fadeIn(function() {
            $.getJSON("https://api.darksky.net/forecast/15f8bf5641489ec32f66662221933c14/" + lat + long, function(forecast) {
                consolelog(forecast);
            });
        });
    });
});

The variables will then be available in the whole scope of the document ready function

This doesn't return anything, as if it hasn't been pushed to the variables? — Epic Triffid, Jul 03 '17 at 17:53

score -1 · Answer 4 · answered Jul 03 '17 at 15:09

-1

Declare the 2 variables globally without the var

answered Jul 03 '17 at 15:09

Ivan Notarstefano

115
1
4
18

this wouldn't be the best way of doing it - plus always answer with a full explanation as to why, so people learn instead of remember how to – treyBake Jul 03 '17 at 15:10

Accessing data outside of ajax request

4 Answers4