[SOLVED] jQuery: jsonp fails because of strings containing colons

jQuery: jsonp fails because of strings containing colons

I grab a JSON string from an API using jQuery's dataType 'jsonp'. The operation fails because the returning obj contains strings which have ':' colons in it.

Find fiddle here: http://jsfiddle.net/ezmilhouse/vZjV4/1/

var url = 'http://api.spreadshirt.com/api/v1/shops/329852/articles?fullData=true&locale=us_US&offset=0&attributeSet=staticShop&mediaType=jsonp';

$.ajax({
  cache: false,
  callback: "callback",
  dataType: 'jsonp',
  pageCache: false,
  url: url,
  callbackParameter: "callback",
  success: function(data, status, jqXHR) {
    console.log(data);  
}});

The returning obj looks like this, which is valid JSON (tested with jsonlint.com) :

{"articles": [
    {
        "name": "Honoring Generations of Mothers - Youth TShirt",
        "description": "t-shirt for women, Brand: ALO"
    }
]}

But jQuery throws a

unterminated string literal

error because it doesn't like the colon after 'Brand'

"description": "t-shirt for women, Brand: ALO" // colon causes error

Do colons need to be escaped to work with jQuery's jsonp? Any workarounds?

thx

Solution

I got your exception, but reason is not colon, your jsonp response is malformed (it is very large, about 38k characters, and seems to me that it is limited to 64k or something like that, so it is missing the end).

It ends with: "size":{"id":"2"},"

" at the end is unterminated string literal

If you would close it (i.e. "size":{"id":"2"}}]};) only then browser would be able to parse that jsonp.

EDIT

I can get whole response from chrome, but its dev tools is showing only part of it, I was wrong. Will check it in IE.

EDIT2

If you inspect your response in IE developer tools, you will see that you have newline in jsonp twice, every time after Brand: American Apparel, so it breaks the string and js cannot parse jsonp.