calling a variable outside of a .getJSON function?

Question

I am trying to call a variable outside of .getJSON function. I am declaring it outside of the .getJSON function, then assigning it a value inside the .getJSON function. However, when I try to pull it out after, it says it is empty (when I can see in the console log that it has the information inside). Here's the code:

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var waypts = [];
    $.getJSON("/westcoast_map.php", // The server URL
      { westcoast_id : $('.opener').data('westcoast_id') }, // Data you want to pass to the server.
      function(json) {
        waypts = json[1];
        console.log(waypts); //prints out full array
      });
    console.log(waypts); //prints out an empty array

possible duplicate of [How to return the response from an AJAX call from a function?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call-from-a-function) — Musa, Mar 01 '13 at 22:18
Yes, pretty much is. Flagged. @user1072337 that post will answer very thoroughly your question. — Leeish, Mar 01 '13 at 22:21

score 3 · Answer 1 · answered Mar 01 '13 at 22:19

I can't remember what this is called, but it's a timing issue. The getJson is asynchronous. So your javascript processes the part after the JSON request before the JSON request can even get back. You need to call a function inside the complete function and pass it in.

var waypts = [];
$.getJSON("/westcoast_map.php", // The server URL
    { westcoast_id : $('.opener').data('westcoast_id') }, // Data you want to pass to the server.
    function(json) {
        waypts = json[1];
        console.log(waypts); //prints out full array
        runCodeAfter();
    });
function runCodeAfter(){
    console.log(waypts); //should print out full array.
}

a supporting answer is here: http://stackoverflow.com/questions/5935968/use-variable-outside-the-success-function-from-an-ajax-jquery-call — user1063287, Sep 30 '13 at 17:32

thitemple · Answer 2 · 2013-03-01T22:31:09.573

1

In JavaScript a scope of a variable is valid only inside a function, so you can't access the variable waypts outside the function calcRoute.

If you want to do that, you have to declare the variable waypts outside the function.

EDIT:

if you wan't to execute some after a response from an ajax call is received, you can do this with jQuery:

    function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var waypts = [];
        var data = $.getJSON("/westcoast_map.php",
          { westcoast_id : $('.opener').data('westcoast_id') });
      $.when(data).then(function(theData){
         waypts = theData[1];
      });
   }

edited Mar 01 '13 at 22:31

answered Mar 01 '13 at 22:20

thitemple

5,337
3
38
62

i'm using exactly that, except i'm replacing theData with json...it says Object function (j,s){return new b.fn.init(j,s)} has no method 'when' – user1072337 Mar 02 '13 at 00:09
1

Which version of jQuery are using? The method "when" is available after version 1.5. Try to post your updated code on jsfiddle. – thitemple Mar 02 '13 at 14:06

calling a variable outside of a .getJSON function?

2 Answers2