#

# 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.

### 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>