Uncaught SyntaxError: Unexpected token : when returning JSON

Question

I've got some jQuery that is successful in hitting an endpoint, here's my code

$.ajax({
    dataType: "json",
    type: "GET",
    url: "https://url.that-works.com/env/Development/GetDevs/",
    username: "username",
    password: "password",
    data: "callback=?"
})
.done(function (data) {
    alert("success");
})
;

The code returns the following JSON response - which I can see in Chrome Developer Tools:

{
"developments": [
    {
        "name": "h2010 Ph2"
    },
    {
        "name": "The Meadows Ph2"
    },
    {
        "name": "h2010 Ph3"
    },
    {
        "name": "h2010 Ph4"
    },
    {
        "name": "The Meadows Ph3"
    }
  ]
}

I've checked that this is valid JSON being returned, but I keep getting an error message: Uncaught SyntaxError: Unexpected token :

I'm not sure what exactly I'm doing wrong here or why I'm getting this message, any guidance would be really appreciated.

bengrah.

@vogomatix — Can't be. `dataType: "json",` causes jQuery to ignore the Content-Type — Quentin, Jul 20 '15 at 15:43
Whats the line number? Is it telling you were the syntax error occurred and what the trace is? — somethinghere, Jul 20 '15 at 15:45
I've just built a local test cause using that code (and substituting my own URL) and cannot reproduce the problem. Whatever it is, it isn't expressed in your question. — Quentin, Jul 20 '15 at 15:51
pay attention on you `data` param sen as GET request ... you can add this string to your URL if needed, but you can try without it. Norrmaly you can see where the exception happened ... so you can see more info why it happens. — Reflective, Jul 20 '15 at 15:52
@Reflective — Removing it doesn't make a difference. The code works with it present in my tests. — Quentin, Jul 20 '15 at 15:54
Then I don't see any problem with code and json data which is valid. — Reflective, Jul 20 '15 at 15:57
not sure what's the response header, but it should be `application/json` - it's important. — Reflective, Jul 20 '15 at 16:00
@Reflective — As I said, I can't reproduce the problem locally. Sending the correct content type is best practise, but as I mentioned earlier, `dataType: "json"`, causes jQuery to ignore it. — Quentin, Jul 20 '15 at 16:06
My guess is what is being returned is not exactly what is in the code above. — epascarello, Jul 20 '15 at 16:25
jQuery version? there are a lot of changes in AJAX in different versions. Can we know what's the jQuery version? — Reflective, Jul 20 '15 at 16:28
@vogomatix Line number is 1, it says it's part of a jQuery response, it looks like this jQuery18406445654265099913_1319844792316:1 (line number — bengrah, Jul 22 '15 at 10:04
@Quentin The endpoint I'm hitting is in the cloud, not sure if that's got an impact on it here. — bengrah, Jul 22 '15 at 10:05
Like I said, I _do_ see the JSON on the response, but I'm not able to use the response in the code. — bengrah, Jul 22 '15 at 10:05

score 1 · Answer 1 · answered Jul 20 '15 at 17:14

1

In jQuery docs you can find the following:

'Cross-domain json requests are converted to jsonp unless the request includes jsonp: false in its request options.'

So probably you are making a cross domain call and it is converted to jsonp because you have specified dataType: 'json'.

When in JSONP mode, jQuery looks for such kind of response:

jQuery18406445654265099913_1319844792316({
"developments": [
    {
        "name": "h2010 Ph2"
    },
    {
        "name": "The Meadows Ph2"
    },
    {
        "name": "h2010 Ph3"
    },
    {
        "name": "h2010 Ph4"
    },
    {
        "name": "The Meadows Ph3"
    }
  ]
})

but not a JSON string, so you are getting an error during the convertion. JSONP expects a javascript, not a string. If you take a look at the jQuery code you can make it more clear for you, but that's in general.

answered Jul 20 '15 at 17:14

Reflective

3,854
1
13
25

@Reflective should I change my datatype to _jsonp_ - I'll take a look at the jQuery docs for this as well. – bengrah Jul 22 '15 at 10:08
Doesn't matter if you change it from JSON to JSONP, it will be executed as JSONP because it is cross domain call, but if you have to be correct in your code, change it to JSONP because it is actually a JSONP call. – Reflective Jul 22 '15 at 10:31
Probably if you change it to `jsonp` it will work, but my advice is to remove `data: "callback=?"` - callback function will be passed automatically when you use `datatype: 'jsonp'` – Reflective Jul 22 '15 at 11:00
@Reflective Changed the dataType: "jsonp", removed the data: "callback=?" but still getting the same error. Will continue looking at the docs. – bengrah Jul 23 '15 at 12:39

score 0 · Accepted Answer · edited May 23 '17 at 10:26

Eventually figured out the answer.

In our case, we were using a middleware appliance that generates the above URL/orchestration the script hits to get the JSON and so on. What we were trying to do was use a JSONP request to get at this info, but the orchestration returns JSON that wasn't wrapped in a function, which is where our problem lies.

Instead, we changed it to a standard JSON get request, which then caused the Access-Control-Allow-Origins error (good link here). At this point, we added the Access-Control-Allow-Origins setting to the orchestration/server side - then we were able to get the JSON back in a usable format successfully.

Uncaught SyntaxError: Unexpected token : when returning JSON

2 Answers2