unable to read json file via ajax

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?

You are accessing a third party URL. This is subject to the [Same Origin Policy](http://en.wikipedia.org/wiki/Same_origin_policy). You cannot access the data unless the server supports a way to do so or you use your own proxy. — Felix Kling, Dec 13 '12 at 17:24
Adding `jsonp` doesn't magically make it cross domain. The server needs to support JSONP. — gen_Eric, Dec 13 '12 at 17:25

score 2 · Answer 1 · answered Dec 13 '12 at 17:13

2

You shouldn't set type to jsonp, That is JSON with padding, in that it is assumed that response is wrapped inside a function call.

callback({payload: values});

and will tried to be executed.

Instead use type: json, or simply $.getJSON which will correctly pass the JSON payload with $.parseJSON.

answered Dec 13 '12 at 17:13

BuddhiP

6,231
5
36
56

1

I am guessing he is using `jsonp` to make it work cross-domain. If so, this won´t do it for him. – mekwall Dec 13 '12 at 17:21
I think it still works, jQuery will create a new function and pass it as the callback function name, ultimately it comes down to the same thing. (Never tried this though, I stand to be corrected!) – BuddhiP Dec 13 '12 at 17:30
jQuery only creates a callback function if you tell it it's a JSONP request, otherwise it will treat it as a normal JSON request. – mekwall Dec 13 '12 at 17:31
no, I think if he can change the url to be in format 'http://chapters.zmgc.net?callback=?' it should work with $.getJSON (Assuming server knows to wrap the JSON in the callback. again, I did not try this) – BuddhiP Dec 13 '12 at 18:05

mekwall · Accepted Answer · 2012-12-13T17:39:31.600

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

edited Dec 13 '12 at 17:39

answered Dec 13 '12 at 17:10

mekwall

28,614
6
75
77

i get the same error 'Uncaught SyntaxError: Unexpected token :' when i change the code to `$.getJSON("http://chapters.zmgc.net?callback=?", function(json) { // ... rest of the code console.log(json); });` – khinester Dec 13 '12 at 17:54
@khinester That's because `chapters.zmgc.net` is not returning JSONP but just normal JSON. I've explained this in my answer. – mekwall Dec 13 '12 at 18:04
ok i have fixed this now with the help from http://stackoverflow.com/a/3602574/477340 and did not have to change my code! – khinester Dec 13 '12 at 20:13

score 0 · Answer 3 · answered Dec 13 '12 at 17:18

As Ajax uses jsonp (json with padding) but your url doesn't seem to be jsonp compatible, so you have to avoid using that.

from jQuery:

"jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.

more here : http://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/

unable to read json file via ajax

3 Answers3