Returning data from JSONP callback

Question

I have a class that fetches jsonp data. I would like to simply return a value but am unable to do so. The callback does not update the class property - not sure if it is a timing or scope issue

Ext.define("App.ContentManager", {
    extend: "Ext.util.Observable",
    singleton: true,

    data: 'empty',
    getData: function() {
        this.doLoad();
        console.log(a.data) //not correct - shows original value
        return this.data;

    },
    doLoad: function(url) {
        var a = this;
        Ext.util.JSONP.request({
            url: "http://example.com/somejson",
            callbackKey: "callback",
            callback: function(c) {
                a.data = c;
                console.log(a.data) //correct json data is here
            }
        })
    },
});

callback is asynchronous, so a.data is not returned immediately after you call doLoad — Joe
– Joe, Commented Nov 11, 2011 at 0:06

ilija139 · Accepted Answer · 2011-11-11 00:05:39Z

2

Of course is timing issue. With doLoad() in the getDate function you just start the request and you don't wait for it to complete in order to have the data ready in the next line. You only have the data ready in the callback: function of the doLoad method. So whatever you need to do it's best to send the request in one function and then in the callback:function have a function that will use the data returned.

Update

Also I just noticed is a scope issue too. You shout pass the scope in the JSONP request with adding a

          url: "http://example.com/somejson",
        scope: this,    //this line
  callbackKey: "callback",

And then in the getDate you should: this.data since a is local variable in the doLoad method.

answered Nov 11, 2011 at 0:05

ilija139

2,9733 gold badges22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cyberwombat Over a year ago

Thanks - Ill mark this answer as correct since it's the first one - I ended up loading my json in my sencha view and applying it to the html

Brian Moeskau · Accepted Answer · 2011-11-11 17:02:42Z

As noted in existing comments, since the doLoad method retrieves the data asynchronously, there is no way to return the result directly from the method call. Your two options would be:

Define your method with a callback parameter (this is done commonly in Ext itself) so that inside the JSONP callback you would execute the passed callback function, passing the returned data.
Define a custom event that your class could fire from the JSONP callback, passing the data as an event argument. This would be more suitable in the case where multiple components might be interested in the result of the JSONP call.

Or you could even do both (untested):

doLoad: function(options) {
    var me = this;

    Ext.util.JSONP.request({
        url: options.url,
        scope: me,
        callbackKey: "callback",

        callback: function(data) {
            me.fireEvent('dataloaded', me, data);
            if (options.callback) {
                options.callback.apply(options.scope || me, [data]);
            }
        }
    })
}

Collectives™ on Stack Overflow

Returning data from JSONP callback

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related