Pass or return JSON Object from jQuery GET

Question

I have a function that makes a GET request for a nested JSON object. The object is returned successfully but you can't access the other objects within the returned object.

the object looks like this :

{
    "student": {
        "hobbies": ["reading", "dancing", "music"], 
        "subjects": ["english", "maths", "science"]
    }
}

and this is the function :

var superObject = {

    getData: function(obj) {
        $.get(obj.target, function(callbackObject) {
            // It works fine if i log callbackObject
            // console.log(callbackObject);
            return callbackObject;
        }
    },

    useData: function() {
        var data = superObject.getData({'target': 'file.json'});
        var hobbies = data.student.hobbies;
        console.log(hobbies); // This fails and returns nothing.
    }
}

Adam Rackis · Answer 1 · 2011-12-09T16:02:51.947

The problem is that you're returning callbackObject from your $.get callback, and not from your getData function. $.get is asynchronous, so its callback will not fire until long after getData() has finished. That's why you're seeing undefined.

What about something like:

var superObject = {
    getReuslts: {},

    getData: function(obj) {
        $.get(obj.target, function(callbackObject) {
            getReuslts = callbackObject;
            this.useData();
        }
    },

    useData: function() {
        var hobbies = getReuslts.student.hobbies;
        console.log(hobbies); 
    }
}

Of course this would create a temporal dependency between useData and getData. Why not create this object in a function so you can add some encapsulation?

funcition getSuperObject = {
    var result = {};
    var getReuslts = {};

    function useData() {
        var hobbies = getReuslts.student.hobbies;
        console.log(hobbies); 
    }

    result.getData = function(obj) {
        $.get(obj.target, function(callbackObject) {
            getReuslts = callbackObject;
            useData();
        });
    };
    return result;
}

Or supply your own callback:

var superObject = {    
    getData: function(obj, callback) {
        $.get(obj.target, function(callbackObject) {
            if (callback)
                callback(calbackObject);
        });
    }
}

And then

superObject.getData({'target': 'file.json'}, function(result) {
    var hobbies = result.student.hobbies;
    console.log(hobbies); // This fails and returns nothing.
});

score 1 · Answer 2 · answered Dec 09 '11 at 15:37

1

Due to asynchronous Ajax behaviour, you need to pass a callback function to execute once the data retrieved via Ajax is available; something like:

getData: function(obj, callback) {
    $.get(obj.target, function(callbackObject) {
        callback.call(null, callbackObject);
    }
}

useData: function() {
    superObject.getData({'target': 'file.json'}, function(data) {
        var hobbies = data.student.hobbies;
    });
}

answered Dec 09 '11 at 15:37

jabclab

14,786
5
54
51

You logic worked for me. I just read a little about **asynchronous** and it helped. Thanks a lot. – Robert Wilson Dec 10 '11 at 09:56

score 0 · Answer 3 · answered Dec 09 '11 at 15:34

$.get works asynchronously: you call it, then the browser goes off to make the request. Meanwhile, your code continues running. When the browser gets the response from the server, it invokes the callback function you provided passing it the results.

This means that when getData runs, it will return "almost immediately" and the request started by $.get will still be in progress in the background. So, getData cannot return anything meaningful to its caller because it can only schedule a requestl; it cannot know what the result will end up being.

So it follows that you cannot call getData like this:

var data = superObject.getData({'target': 'file.json'});

What you need to do instead is put the code that depends on the response inside the callback:

$.get(obj.target, function(data) {  
    var hobbies = data.student.hobbies;   
    console.log(hobbies); // This will now work
}

score 0 · Answer 4 · answered Dec 09 '11 at 15:35

The scope of your variables is only in your function You can try to set the variable hobbies out of your structure, and set it's value inside of your function

var hobbies; //global scope
var superObject = { 
getData: function(obj) {
$.get(obj.target, function(callbackObject) {
    // It works fine if i log callbackObject
    // console.log(callbackObject);
    return callbackObject;
}},

useData: function() {
var data = superObject.getData({'target': 'file.json'});
 hobbies= data.student.hobbies; 
//set it's value
 }
 }

score 0 · Answer 5 · answered Dec 09 '11 at 15:45

You are returning in the callback handler. So your result is sent to the callback dispatcher which drops your result. What you need to do is attach your processing code to the get callback:

getData: function(obj) { return $.getJSON(obj.target); },
useData: function() {
  getData({ target : 'file.json'}).then(function(results) {
    var hobbies = results.student.hobbies;
    console.log(hobbies);

  }
}

score 0 · Answer 6 · edited May 23 '17 at 11:48

0

You could turn your asynchronous AJAX call to be synchronous. See http://api.jquery.com/jQuery.ajax/, mainly the "async" option.

See this discussion:

Ajax jquery synchronous callback success

edited May 23 '17 at 11:48

Community

1
1

answered Dec 09 '11 at 16:15

Nick Bork

4,831
1
24
25

Pass or return JSON Object from jQuery GET

6 Answers6

Linked