回调函数“未定义”

Question

I am building a script that fetches multiple JSON feeds from Tumblr and creates HTML lists based on that data. Pretty straightforward concept.

Here's the output: http://fotis.co/tumblr/index.html

The script is partly working as I'm stumbling on "callback function not defined" issues. That happens only when I choose to use a callback function when requesting the Tumblr JSON feed. By default, if you don't specify a callback function via the Tumblr API, the JSON object returned is assigned to a variable named tumblr_api_read. So the JSON actually returns:

var tumblr_api_read = {the JSON object data goes here};

If I use a callback function, the JSON data is returned like this (as expected):

callbackFunctionName({the JSON object data goes here});

If you check out the script code here http://fotis.co/tumblr/tumblr.js :

/* Read Tumblr */

function ready(cb) {
    /in/.test(document.readyState) ? setTimeout('ready('+cb+')', 9) : cb();
}

function getTumblrFeed(params) {
    /*
    Legend:
    start - The post offset to start from. The default is 0.
    num - The number of posts to return. The default is 20, and the maximum is 50.
    type - The type of posts to return. If unspecified or empty, all types of posts are returned. Must be one of text, quote, photo, link, chat, video, or audio.
    id - A specific post ID to return. Use instead of start, num, or type.
    filter - Alternate filter to run on the text content. Allowed values:
        text - Plain text only. No HTML.
        none - No post-processing. Output exactly what the author entered. (Note: Some authors write in Markdown, which will not be converted to HTML when this option is used.)
    tagged - Return posts with this tag in reverse-chronological order (newest first). Optionally specify chrono=1 to sort in chronological order (oldest first).
    search - Search for posts with this query.
    */
    if(params.blogurl) var blogurl = params.blogurl;
    if(params.postcount) var num = params.postcount;
    var jsonurl = document.location.protocol+ '//' +blogurl+ '/api/read/json?num=' +num;
    if(params.type) jsonurl += '&type=' + params.type;
    if(params.tagged) jsonurl += '&tagged=' + params.tagged;
    if(params.search) jsonurl += '&search=' + params.search;
    if(params.callback) jsonurl += '&callback=' + params.callback;
    var jsonfeedscript = document.createElement('script');
    jsonfeedscript.setAttribute('charset', 'utf-8');
    jsonfeedscript.setAttribute('type', 'text/javascript');
    jsonfeedscript.setAttribute('async', 'true');
    jsonfeedscript.setAttribute('src', jsonurl);
    return jsonfeedscript;
}

function renderResults(settings) {
    var tumblrObj = (settings.callback) ? settings.callback : tumblr_api_read;

    var i = 0;
    var c = document.getElementById(settings.container);

    for(i; i<tumblrObj.posts.length; i++){
        // URL
        var postUrl = tumblrObj.posts[i]['url-with-slug'];
        // Title
        if(tumblrObj.posts[i]['regular-title']){
            var postTitle = tumblrObj.posts[i]['regular-title'];
        } else if(tumblrObj.posts[i]['quote-text']){
            var postTitle = tumblrObj.posts[i]['quote-text'];
        } else if(tumblrObj.posts[i]['link-text']){
            var postTitle = tumblrObj.posts[i]['link-text'];
        } else if(tumblrObj.posts[i]['audio-caption']){
            var postTitle = tumblrObj.posts[i]['audio-caption'];
        } else if(tumblrObj.posts[i]['photo-caption']){
            var postTitle = tumblrObj.posts[i]['photo-caption'];
        } else if(tumblrObj.posts[i]['video-caption']){
            var postTitle = tumblrObj.posts[i]['video-caption'];
        } else if(tumblrObj.posts[i]['conversation-text']){
            var postTitle = tumblrObj.posts[i]['conversation-text'];
        } else {
            var postTitle = '';
        }
        // Date
        var postDate = tumblrObj.posts[i]['date']; // or: date-gmt, unix-timestamp
        // Type
        var postType = tumblrObj.posts[i]['type'];
        // Output
        var output = settings.theme.replace("{postUrl}",postUrl).replace("{postTitle}",postTitle).replace("{postDate}",postDate);
        c.innerHTML += output;
    }

    // Hide the loader
    var l = document.getElementById(settings.loader);
    c.removeChild(l);
}

function readTumblr(settings) {
    // Load JSON data
    var head = document.getElementsByTagName('head')[0];
    var jsonfeedscript = getTumblrFeed(settings);
    head.appendChild(jsonfeedscript);

    jsonfeedscript.onload = function(){
        renderResults(settings);
    }
}

You will see that I do a check if the JSON feed is invoked with a callback function (inside readTumblr()), otherwise I just use the default object "tumblr_api_read". If no callback function is defined where the script is initialized (inside index.html) the Tumblr JSON data are properly rendered (see Containers 2 and 3 in the html output). If I DO define a callback function, I get something like "callbackFunctioName is not defined" and then rendering fails.

Am I missing something here? Is it a scope issue? And if so, how can I bypass it?

Thanks in advance for any answers.

EDIT 1 : Updated script code above.

Answer 1

If you supply a callback to a JSONP API, you'll get back a JavaScript snippet that calls whatever function you supplied with the JSON data as an argument. As you noted:

callbackFunctionName({the JSON object data goes here});

The JSONP/callback system all depends on your code having already defined the callbackFunctionName function, so there's something to be called. The idea is, you put your code that needs to work on the Tumblr data in that callback function.

If you prefer working with the var tumblr_api_read way of doing things, just don't specify a callback.

Otherwise, you'd basically want to move what you currently have as jsonfeedscript.onload to whatever function you're defining as the callback. As an example, if you gave the Tumblr API a "callback" parameter of "myCallback", your code should look basically like:

function myCallback(tumblrObj) {
    // Your code that reads the JSON and inserts the HTML
}

You don't then ever need to call myCallback yourself . You just make the JSONP request by inserting the script tag, and the Tumblr API will give you back a script that calls myCallback and passes in the JSON data.

Answer 2

Shouldn't this line:

tumblrObj = (settings.callback) ? settings.callback : tumblr_api_read

be:

tumblrObj = (settings.callback) ? settings.callback() : tumblr_api_read

?

I'm not sure, it looks weird to me.