Creating a helper method with jquery/json/getJSON

Question

I wanted to create a helper method that can be contained in an included javascript and referenced easily. The helper method wraps the .getJSON function from jquery ...

function doSomething(someThing) { 
  $.getJSON(theCoolestURLEver, {auth_key:"barfoo", id:someThing}, function(data) {
   console.log(data);
   return data;
  });
}

In my normal HTML pages, what I want to do is:

<html>
<head>
   <script src="/_/js/myCoolFunctions.js"></script>
</head>
<body>
<script>
  var someThing = "foobar";
  var data = doSomething(someThing);
  console.log(data);
</script>
</body>
</html>

The end result is that the console.log comes back as undefined in the second block of code. I understand now that this has to do with scope or that the page loads and the data isn't available when the < script > tag loads. So ... if this is true, how do I create a helper method that can hide some complexity that occurs ALL the time? Like adding the auth_key ...

possible duplicate of [jQuery: Return data after ajax call success](http://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success) and [so many more](http://stackoverflow.com/search?q=return+data+from+ajax+call) — Felix Kling, Apr 14 '11 at 07:37

score 4 · Accepted Answer · answered Apr 14 '11 at 07:23

The problem is that AJAX requests (such as $.getJSON) are asynchronous. That means that the function call returns immediately, before the request has completed. You're providing a callback -- this function is run after the data is received; this will be after the console.log.

(As an additional point, the return only sets the return value of the handler, not the doSomething function.)

The best way round this would be, I think, to create your own helper method:

$.getJSONAuth = function(url, data, success) {
    var authData =  {auth_key:"barfoo"};

    if ($.type(data) === 'function') {
        success = data;
        data = authData;
    } else {
        data = $.extend({}, authData, data);
    }

    return $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        success: success,
        data: data
    });
}

You could now call this as so:

$.getJSONAuth(theCoolestURLEver, {id:someThing}, function(data) {
    console.log(data);
});

score 1 · Answer 2 · answered Apr 14 '11 at 07:23

Your doSomething function does not return anything, the callback function of getJSON does. getJSON is executed async, so your doSomething function ends, before the request is completed. You can pass a function to your doSomething function however:

function doSomething(someThing, callback) { 
  $.getJSON(theCoolestURLEver, {auth_key:"barfoo", id:someThing}, function(data) {
   callback(data)
   return data;
  });
}

And call it like this:

<script>
  var someThing = "foobar";
  doSomething(someThing, function(data) { console.log(data); });
</script>

score -1 · Answer 3 · answered Apr 14 '11 at 07:19

-1

What if you do:

$.getJSON(theCoolestURLEver, {'auth_key:"barfoo"', 'id:someThing'}, function(data)

Note the ' symbols rounding the json keys. I don't know, but it's how I 'd do it.

answered Apr 14 '11 at 07:19

elvenbyte

776
1
17
34

That is invalid JavaScript... and you have a misunderstanding: (a) This is not JSON, it is an JS object and for them, the keys don't have to be in quotes (only if they are not valid identifiers or numbers or ... something else). (b) If any, keys in JSON must be in double quotes. – Felix Kling Apr 14 '11 at 07:38

Creating a helper method with jquery/json/getJSON

3 Answers3