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

This example illustrates basic use of the Y.jsonp( url, callback ) method, provided by the jsonp module.

For this example, we will use GitHub's webservice API, fetching user information about some members of the YUI team.

Note: If the GitHub API is unavailable, you can try this example with mock data.

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>