Question

I have some code that requests some JSON from an API. When data is returned, per the documentation, it sends back a callback function that is to be used to parse the data at the top level. After the call is made, I have the following code to capture the data and process it:

var callback = 'functionUsedInApiCall';
window[callback] = newCallBackFunction;

How would I go about passing custom params to the callback function above as the data is being returned?

In order to capture the data, I must write the callback function like this:

function newCallBackFunction(root) {
   //root is the data
}

Any help would be greatly appreciated.

Answer 1

Are you talking about JSONP? If so, you don’t call the callback or pass in the argument at all, the code returned by the API does.

E.g., your code:

window.myCallback = newCallbackFunction;

function newCallbackFunction(data) {
    // use the data
}

(I’m assuming this isn’t at global scope, hence assigning to the window object.)

…plus your code for initiating the JSONP call, which is usually appending a script element to your page with a URL containing the name of the callback (“myCallback” in the above).

Their response will look like this:

myCallback({
    // data here
});

…which, when it arrives, will run (because it’s the content of a script element), and will call your function. This is how JSONP works.

---

If you want to include further arguments for the function, all you do is have the callback they call turn around and call your target function, e.g.:

window.myCallback = function(data) {
    newCallbackFunction(data, "foo", "bar");
};

function newCallbackFunction(data) {
    // use the data
}

Now when their code calls the global myCallback, all it does is turn around and call newCallbackFunction with that data and the arguments you specify.

Those arguments don’t have to be literals as in the above. Here’s an example with a bit more context, using a closure:

// Assume the url already contains the name of the callback "myCallback"
function doJSONP(url, niftyInfo, moreNiftyInfo) {
     var script;

     // Set up the callback
     window.myCallback = function(data) {
        // Runs when the data arrives
        newCallbackFunction(data, niftyInfo, moreNiftyInfo);
     };

     // Trigger the request
     script = document.createElement('script');
     script.src = url;
     document.documentElement.appendChild(script);
}

Ideally, though, when doing JSONP you auto-generate the name of the callback each time so that it’s specific to the request (in case you have two outstanding requests at the same time):

// Assume the url ends with "callback=" and we append the name of the
// callback function to it
function doJSONP(url, niftyInfo, moreNiftyInfo) {
     var cbname, script;

     // Get a callback name
     cbname = "callback_" +
              new Date().getTime() +
              "_" +
              Math.floor(Math.random() * 10000);

     // Set up the callback
     window[cbname] = function(data) {
        // Remove us from the window object
        try {
            delete window[cbname];
        }
        catch (e) { // Handle IE bug (throws an error when you try to delete window properties)
            window[cbname] = undefined;
        }

        // Runs the function
        newCallbackFunction(data, niftyInfo, moreNiftyInfo);
     };

     // Trigger the request
     script = document.createElement('script');
     script.src = url + encodeURIComponent(cbname);
     document.documentElement.appendChild(script);
}