Javascript - Scope issue - Has good Javascript Answer

Question

I'm trying to use an ajax response in getLocation() to save variables lat and long for use in getWeatherReport() but both variables are empty strings when I console.log them in the 2nd function.

To my understanding creating the variables outside of the scope of the functions would allow them to be updated by the first function and then have those updated values plugged into the second one. If anyone could explain where I went wrong and why this isn't the case it would be very much appreciated. Thank you!

To Clarify the AJAX call is working fine.

console.log(lat + ", " + long); Shows the expected results of a latitude and longitude.

JS

var lat = "";
var long = "";

function getLocation(){
    console.log("Getting location with ajax");
    if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", function(){
            console.log("loading...");
            console.log(xhr.responseText);
            var response = JSON.parse(xhr.responseText);
            console.log("Parsed response: ");

            var lat  = response.latitude;
            var long = response.longitude;

            console.log(lat + ", " + long);

            return lat;
        }, false);

        xhr.addEventListener("error", function(err){
            console.log("Could not complete the request");
        }, false);

        xhr.open("GET", "http://www.telize.com/geoip", true);
        xhr.send();
        console.log("Requestiong location info...");
    } else {
        console.log("Unable to fetch location info from dropbox.");
    }
}

function getWeatherReport(){
    console.log("Weather Report Location");
    console.log(lat + long);
}

getLocation();
getWeatherReport();

dont use `var` inside the function. That's creating new variables. — Verhaeren, Dec 19 '14 at 18:05
`return lat;` inside of your load event handler doesn't work. — Kevin B, Dec 19 '14 at 18:05

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

It is because you are re-defining them here:

var lat  = response.latitude;
var long = response.longitude;

Remove the var keywords and you should be fine.

Update

Try modifying your code like this:

var latitude = "";
var longitude = "";

function getLocation(callback){
    console.log("Getting location with ajax");
    if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", function(){
            console.log("loading...");
            console.log(xhr.responseText);
            var response = JSON.parse(xhr.responseText);
            console.log("Parsed response: ");         

            callback(response);

        }, false);

        xhr.addEventListener("error", function(err){
            console.log("Could not complete the request");
        }, false);

        xhr.open("GET", "http://www.telize.com/geoip", true);
        xhr.send();
        console.log("Requestiong location info...");
    } else {
        console.log("Unable to fetch location info from dropbox.");
    }
}  

getLocation(function(response) {
    console.log("Weather Report Location");

    latitude  = response.latitude;
    longitude = response.longitude;

    console.log(latitude + ", " + longitude);
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 19 '14 at 18:05

Dev01

4,082
5
29
45

Thanks! I didn't even think of that! I'm still getting the "(an empty string)" when I try to console.log lat and long though. Any other ideas of what it could be? – mario Dec 19 '14 at 18:09
Side-note, the console messages from getWeatherReport() are showing before getLocation() if that helps any. – mario Dec 19 '14 at 18:12
2

You're my hero man. For some reason this subject gets censored hardcore by the mods so most of the questions on this subject all get redirected to one example - which kind of defeats the purpose of this site lol. You're great man. I can understand what they were trying to say now. – mario Dec 19 '14 at 21:58
One more question. The reason I'm doing all this is because I'm wanting to use the Lat and Long to send to a second api. That's why I was hoping to be able to return the latitude and longitude, so that I could use them in another ajax request. So since I can't do that here should I just build that ajax request inside of the getLocation(function(response){} or is that a bad idea? – mario Dec 19 '14 at 22:15
1

yes you can do that or you can simply send variables from another function since after first ajax request they get stored in variables declared at top `var latitude` and `var longitude` so you can then send these variable values in another ajax request – Dev01 Dec 20 '14 at 06:55

Javascript - Scope issue - Has good Javascript Answer

1 Answers1

Update