Question

in my code i have:

   $.ajax({
       url: 'http://chapters.zmgc.net',
       dataType: 'jsonp',
      success: function(d){   // "Type","Name","Link","Contact","Location","Icon"
        Tabzilla.zgContacts = d;
        var countries = [];
        d.rows.forEach(function(row){
          if (row[0] == 'Country') countries.push(
            {link:row[2], contact:row[3], country: row[4]}
          );     
        });

but i get an error, Uncaught SyntaxError: Unexpected token :

{
 "kind": "fusiontables#sqlresponse",
....

if i replace the url with the actual file and remove the dataType, all works as expected!

i have validated the output of http://chapters.zmgc.net at http://jsonlint.com/ and it is ok.

looking at the response headers returned from http://chapters.zmgc.net, it is:

Connection:keep-alive
Content-Type:application/json
Date:Thu, 13 Dec 2012 17:02:27 GMT
Transfer-Encoding:chunked

here is the code https://github.com/tomarcafe/Z-Tabzilla/blob/gh-pages/z-tabzilla.js#L282 i would like to replace the local file with reading the remote data?

what am i missing?

Answer 1

It’s because you’re asking for JSONP (JSON with padding) and getting JSON without padding. JSONP is JSON that is padded by a function call, and the only way to get it to work is by adding support for JSONP on the server.

If you don’t have access to chapters.zmgc.net you’ll have to contact them and ask them to add support for JSONP.

If you do have access you can add ?callback=parseThis to your url and then read that variable on server-side and pad your JSON accordingly:

parseThis(/* put your json in here */);

However, if you don’t define your own callback, jQuery will add one automatically that you can use. They will look something like this: jQuery18200710562220774591_1355419375476