Jquery json syntax error

If you have ever used the JSON.parse() method, then there’s a good chance that you have come across the following error at some point or another:

Uncaught SyntaxError: Unexpected token o in JSON at position 1

This syntax error is thrown if you attempt to parse a JSON string that has already been parsed into a JavaScript object. i.e. The JSON.parse() method cannot be used to parse something that has already been parsed. It expects a JSON string and if you give it anything else, your code will fail.

Fixing the “Unexpected token o” error.

One method I’ve seen is to stringify the variable before attempting to parse it:

var stringified = JSON.stringify(data);
var parsedObj = JSON.parse(stringified);

console.log(parsedObj);

In the JavaScript example above, we used the JSON.stringify() method to convert the data into a string before attempting to parse it. Note that this will not work if the data is already a string.

This leads me onto my next point.

All in all, it depends on what content type the server is returning. In some cases, the server will return Content-Type: application/json. In other cases, it will return a valid JSON string with Content-Type: text/html.

If you are using JQuery’s AJAX method and the server responds with a Content-Type of application/json, then you will not need to parse the JSON. This is because JQuery detects the content type and automatically parses it into a JavaScript object.

Take the following PHP script, for example:

<?php

header('Content-Type: application/json');

echo json_encode(array(
    'test' => true
));

The code above sets the correct Content-Type before printing the JSON string. This means that if we retrieve the JSON data via JQuery’s Ajax method, we will not have to parse it:

$.ajax({
    url: 'json.php',
    success: function(data){
        console.log(data);
    }
});

The JavaScript above will retrieve the JSON from our PHP script and then log the object to our browser’s console. In this particular case, we didn’t have to parse it into a JSON object because the PHP script in question is returning the correct Content-Type.

If we do attempt to parse the data, we will get a nasty “Unexpected token o in JSON” syntax error.

However, what if the server fails to give us the correct Content-Type? What if the server in question is responding with Content-Type: text/html?

<?php

echo json_encode(array(
    'test' => true
));

The PHP code above fails to specify any Content-Type. Therefore, it will default to “text/html“. As a result, we will need to tell our JavaScript code that it needs to parse the data into an object:

$.ajax({
    url: 'json.php',
    success: function(data){
        data = JSON.parse(data);
        console.log(data);
    }
});

As you can see, in this case, we did have to use the JSON.parse() method.

Another alternative is to tell JQuery what the data type is. We can use this by using the dataType setting:

$.ajax({
    url: 'json.php',
    dataType: 'json',
    success: function(data){
        console.log(data);
    }
});

In the AJAX request above, I specifically told JQuery that the returned data will be JSON. This means that I can avoid using the JSON.parse() method, even if the Content-Type is incorrect. Note that this will work, regardless of whether the Content-Type is application/json or text/html.

Hopefully, this post helped to solve your issue!