Example: Getting Cross Domain JSON Data Using Y.jsonp()

The data

The structure of the JavaScript object returned from GitHub's JSONP API for user info will look like this:

{
    data: {
        avatar_id: "fc2cca...",
        login: "username"
        name: "User's Name",
        ...,

        public_repos: 10,
        public_gists: 20,
        following: 30,
        followers: 40
    }
}

We'll use these objects to populate HTML templates with data {placeholder}s using Y.Lang.sub( template, object ). The resulting HTML can then simply be passed to any of YUI 3's DOM creation methods, such as node.setHTML( html ) or node.append( html ). We'll do this in the function that will receive the JSONP response (seen below).

Format the JSONP url

Typical JSONP urls are formatted like

"http://example.com/service?format=json&callback=handleJSONP".

To use YUI 3's JSONP utility, replace the name of the callback function in the url with placeholder text "{callback}".

// BEFORE
var url = "https://api.github.com/users/yui?callback=handleJSONP";

//AFTER
var url = "https://api.github.com/users/yui?callback={callback}";

Then simply pass the url and the function that should handle the JSONP response object to Y.jsonp(<em>url</em>, <em>handleJSONP</em>).

function handleJSONP(response) {
    Y.one("#out").setHTML(Y.Lang.sub(template, response.data));
}

Y.one("#demo_btn").on("click", function (e) {
    // e.g. https://api.github.com/users/yui?callback={callback}
    var url = githubAPI + user.get("value") + "?callback={callback}";

    Y.jsonp(url, handleJSONP);
});

Full Code Listing

HTML

<div id="demo">
    <select id="github_user">
        <option value="yui">YUI Library</option>
        <option value="allenrabinovich">Allen Rabinovich</option>
        <option value="davglass">Dav Glass</option>
        <option value="derek">Derek Gathright</option>
        <option value="ericf">Eric Ferraiuolo</option>
        <option value="jenny">Jenny Donnelly</option>
        <option value="lsmith">Luke Smith</option>
        <option value="msweeney">Matt Sweeney</option>
        <option value="reid">Reid Burke</option>
        <option value="rgrove">Ryan Grove</option>
        <option value="sdesai">Satyen Desai</option>
        <option value="tripp">Tripp Bridges</option>
    </select>
    <input type="button" id="demo_btn" value="Get user info">
    <div id="out">
    </div>
</div>

JavaScript

<script>
YUI().use("jsonp", "node",function (Y) {

    var user      = Y.one("#github_user"),
        githubAPI = "https://api.github.com/users/",
        template  = // assignment continued below
        
    '<table>' +
        '<caption>GitHub user <code>{login}</code> ({name})</caption>' +
        '<thead>' +
            '<tr>' +
                '<th>Repositories</th>' +
                '<th>Gists</th>' +
                '<th>Followers</th>' +
                '<th>Following</th>' +
            '</tr>' +
        '</thead>' +
        '<tbody>' +
            '<tr>' +
                '<td>{public_repos}</td>' +
                '<td>{public_gists}</td>' +
                '<td>{followers}</td>' +
                '<td>{following}</td>' +
            '</tr>' +
        '</tbody>' +
    '</table>';

    function handleJSONP(response) {
        Y.one("#out").setHTML(Y.Lang.sub(template, response.data));
    }

    Y.one("#demo_btn").on("click", function (e) {
        // e.g. https://api.github.com/users/yui?callback={callback}
        var url = githubAPI + user.get("value") + "?callback={callback}";

        Y.jsonp(url, handleJSONP);
    });

});
</script>