Question

Here is my code:

var source;
source = $.getJSON(url, function(json) {
  return console.log(json);
});

The above is returning the full jQuery object vs the JSON I am requested. The response looks something like this:

abort: function ( statusText ) {
always: function () {
complete: function () {
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
isRejected: function () {
isResolved: function () {
overrideMimeType: function ( type ) {
pipe: function ( fnDone, fnFail ) {
promise: function ( obj ) {
readyState: 4
responseText: "{'Hello':'World'}"
setRequestHeader: function ( name, value ) {
status: 200
statusCode: function ( map ) {
statusText: "OK"
success: function () {
then: function ( doneCallbacks, failCallbacks ) {
__proto__: Object

Anyone know what I am doing wrong? I have been dealing with this for a couple of hours now 🙁

Answer 1

AJAX is asynchronous, source cannot equal the JSON you are requesting, because it isn’t available yet. jQuery.getJSON will return the jqXHR object it creates to deal with the request and then runs away and retrieves the response.

$.getJSON(url, function(json) {
  // deal with response  here
});

Upon the response being available (some time later), the callback (the function you’re passing) is executed, so you can access the response in there via the first parameter (which you’ve called json).

You can see this by trying the following:

console.log('1');

$.getJSON(url, function(json) {
    console.log('2');
});

console.log('3');

You’ll see that your console will read 1, 3, and then a split second later (i.e. the time to perform the HTTP request), 2; This shows the getJSON response returning without completing, the script continuing to execute, and then the callback being invoked some time later.