Question

So I wrote an ajax call to github using dataType: json, which worked on my local machine, but it appears that I need to use dataType: jsonP to deal with the cross domain issues. So can anyone help me make the necessary changes. (BTW github appears to support jsonp dataTypes – https://github.com/pgxn/pgxn-api/wiki/JSONP)

$.ajax({
    url: "https://api.github.com/repos/jeffreycwitt/prollecture1/tags",
    dataType: "jsonp",
    crossDomain: true,
    success: function(returndata) {
        if (returndata.length === 0) {
            $("#versionBox").remove();
        }
        else if (returndata.length === 1) {
            $("#versionBox").remove();
        }
        else {
            $.each(returndata, function() {
                $("#versionBox").show();
                var tag = this["name"];
                console.log(tag);
                var currentVersion = $("#editionNumber").text();
                if (tag.substring(1) === currentVersion) {
                    tag = tag + " (Current Version)";
                }
                var linkname = "textdisplay.php?flag=<?php echo $fs; ?>&ed=" + tag;
                $('#versionSubBox').append("<p><a href='" + linkname + "'>View Version: " + tag + "</a></p>");
            });

        }
    }
});

Like i said, this was working when I was just using dataType, json, but its not working with jsonP. I’m under the impressions github will send back the regular json wrapped in something named by the callback parameter added to the call ?callback=?. (This parameter is added automatically by jquery when the dataType is changed to jsonp. So do I need to somehow modify my success function to parse through the wrapper?

Answer 1

Your code seems to work as seen in this live demo.

The problem you are having is that you are trying to access a .length property on the
returndata object and such property doesn’t exist:

{
    "data": [
        {
            "tarball_url": "https://github.com/jeffreycwitt/prollecture1/tarball/v0.2",
            "commit": {
                "sha": "46a8aea57cd095a603f194f83cd4a18adcb35908",
                "url": "https://api.github.com/repos/jeffreycwitt/prollecture1/commits/46a8aea57cd095a603f194f83cd4a18adcb35908"
            },
            "name": "v0.2",
            "zipball_url": "https://github.com/jeffreycwitt/prollecture1/zipball/v0.2"
        }
    ],
    "meta": {
        "status": 200,
        "X-RateLimit-Limit": "5000",
        "X-RateLimit-Remaining": "4993"
    }
}

I guess you meant returndata.data.length because you have a data property which is an array.

So:

var data = returndata.data;
if (data.length === 0) {
    $("#versionBox").remove();
}
else if (data.length === 1) {
    $("#versionBox").remove();
}
else {
    $.each(data, function() {
        $("#versionBox").show();
        var tag = this["name"];
        console.log(tag);
        var currentVersion = $("#editionNumber").text();
        if (tag.substring(1) === currentVersion) {
            tag = tag + " (Current Version)";
        }
        var linkname = "textdisplay.php?flag=<?php echo $fs; ?>&ed=" + tag;
        $('#versionSubBox').append("<p><a href='" + linkname + "'>View Version: " + tag + "</a></p>");
    });
}