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?

Eric Bridger

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.

The API doesn't support JSONP by design