Jquery.ajax API request in JSON format causes “Uncaught SyntaxError: Unexpected token :” in Chrome

问题

I am trying to query the http://developer.pintlabs.com/brewerydb/api-documentation with jquery.ajax.

These are two of the Jquery requests i tried (note that "O3tmVI" is a dummy ID):

    $.ajax({
            url:"http://api.playground.brewerydb.com/beer/" + "O3tmVI" + "?key=A1029384756B&format=json",
            dataType: "jsonp",
            jsonpCallback: "callbackfunctie",
            success:function(oData){
                    var returnData = oData;
                    console.log(returnData);     
            }
    });

And:

$.getJSON("http://api.playground.brewerydb.com/beer/" + "O3tmVI" + "?key=A1029384756B&format=json&jsoncallback=?",
                function(data){
                    console.log(data);
                });

Both cause this error:

Uncaught SyntaxError: Unexpected token :

Now, the json object returned looks like this:

{"message":"Request Successful","data":{"id":"O3tmVI","name":"The Public","description":"The Public\u2122 is a delicious easy drinking pale ale made from a simple recipe of quality grain and top notch American hops. Tawny hues of caramel and amber are a trademark of the Public ale as well as a delicious spruce crispness resulting from a beautiful abundance of hops! This beer will be produced throughout the year and serves as the foundation of our product line.","abv":"6","glasswareId":8,"availableId":1,"styleId":33,"isOrganic":"N","labels":{"icon":"http:\/\/s3.amazonaws.com\/brewerydbapi\/beer\/O3tmVI\/upload_3sdJcU-icon.png","medium":"http:\/\/s3.amazonaws.com\/brewerydbapi\/beer\/O3tmVI\/upload_3sdJcU-medium.png","large":"http:\/\/s3.amazonaws.com\/brewerydbapi\/beer\/O3tmVI\/upload_3sdJcU-large.png"},"status":"verified","statusDisplay":"Verified","servingTemperature":"cool","servingTemperatureDisplay":"Cool - (8-12C\/45-54F)","createDate":"2012-04-05 04:02:36","updateDate":"2012-04-05 04:34:17","glass":{"id":8,"name":"Tulip","createDate":"2012-04-05 04:00:04"},"available":{"id":"1","name":"Year Round","description":"Available year round as a staple beer."},"style":{"id":33,"categoryId":10,"category":{"id":10,"name":"American Ale","bjcpCategory":"10","createDate":"2012-04-05 04:00:04"},"bjcpSubcategory":"A","name":"American Pale Ale","simpleUrl":"american-pale-ale","ibuMin":"30","ibuMax":"45","abvMin":"4.5","abvMax":"6.2","srmMin":"5","srmMax":"14","ogMin":"1.045","ogMax":"1.06","fgMin":"1.01","fgMax":"1.015","createDate":"2012-04-05 04:00:04"}},"status":"success"}

I have succesfully validated it as valid JSON

Now, the problem is i need a JSONP object in order to request it (cross-domain). So it has to be wrapped in a container function. This should be possible with the parameters in the request, but so far i have tried almost anything but have had no success...

I found this article wich has a short entry on this bug: http://www.jquery4u.com/json/ajaxjquery-getjson-simple/

Uncaught SyntaxError: Unexpected token :(in crome) Invalid Lable(in firefox) “invalid label” error can be fixed by passing the JSON data to the js callback

But i don't really understand what he's saying there

What am i doing wrong?

回答1:

My guess is that the service at http://api.playground.brewerydb.com/beer/ is returning json but NOT jsonp. Search the jsonp tag for "Unexpected token" and you'll find many explanations such as this one. The json must be wrapped in a javascript function, i.e. the callback but it is up to the cross domain Web Service to support jsonp. This is enforced by the browser and jQuery cannot overcome it.