1

The problem is very similar to json Uncaught SyntaxError: Unexpected token : and JSONP request returning error: "Uncaught SyntaxError: Unexpected token :"

I tried to make a call to fetch Divvy data. I use JSONP because I don't want to use server for this simple front end app.

$.ajax({
  type: "GET",
  url: 'http://divvybikes.com/stations/json',
  dataType: "jsonp",
  jsonp: "jsonp",
  jsonpCallback: "handleData",
  success: function(){
  }
});

However, Chrome keeps alerting with "Uncaught SyntaxError: Unexpected token :"

The url http://divvybikes.com/stations/json alone works well in browser. Also, the status code is 200 all the time.

Anybody can help?

Community
  • 1
  • 1
hhua
  • 59
  • 1
  • 3
  • 1
    Well, the problem is exactly the same as in these questions. Did you understand the answers there? – Bergi May 09 '14 at 05:11
  • 3
    The url does not return JSONP, but plain JSON. – Bergi May 09 '14 at 05:12
  • @Bergi Yeah, I totally understand. I have a callback handler available `function handleData(){}`, but still does not work. – hhua May 09 '14 at 21:42
  • @FelixKling the question is the same on "how to JSONP this url", but the problem is different. My problem is I already used JSONP to call the api, but still not working. The solution I want is a JSONP solution rather than go back to JSON solution with server side call. – hhua May 09 '14 at 21:49
  • 1
    But JSONP has to be supported by the server. If you don't control the server and change that, you cannot use JSONP. JSONP is not a silver bullet that magically circumvents the same-origin policy. – Felix Kling May 09 '14 at 21:51
  • @FelixKling Boom! You are right. Probably their endpoint does not support JSONP request. Thanks buddy! – hhua May 09 '14 at 22:00

3 Answers3

1

I'm guessing you have omitted some of the code.

First, when Chrome give you that error, you can click on it in the console window and it will show you the exact line that the error is being thrown.

Also, it seems like your code is a little more verbose than it need be. 

$.ajax({
        type: "GET",
        dataType: "jsonp",
        url: "http://divvybikes.com/stations/json",
        success: function (data) {
            console.log(data);
        }
    });
Ray Suelzer
  • 4,026
  • 5
  • 39
  • 55
  • Add @Bergi is correct, that this is actually returning JSON not JSONP. – Ray Suelzer May 09 '14 at 05:16
  • Yeah, I know this. Your code will not work. You need to specify a call back which is globally available by this JSONP request. The problem is I already have this, but not working. – hhua May 09 '14 at 21:52
  • jQuery should keep track of your callback for you and create the global, unless you want to override this. – Ray Suelzer May 11 '14 at 03:20
  • Please see the documentation here: http://api.jquery.com/jquery.ajax/ "pecify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling." Regardless, it looks like the DivvyBikes service does not provide jsonp, so you cannot access it using an ajax request.. – Ray Suelzer May 11 '14 at 03:25
0

The return type should be JSONP but its currently returning JSON

example

//JSON
{"name":"abc","id":0}

//JSONP format
func({"name":"def","id":1});

also ensure that the JSON returned is valid.

Manish Gautam
  • 516
  • 2
  • 7
  • 19
-2

Copy the returned json. Open http://jsonlint.com/

Paste your whole json there and validate. You may find issues with your json returned. Get that right and try again

SSS
  • 1,025
  • 7
  • 17