JSON.parse() does not work when content-type is set to application/json

Question

I am running into a jquery (bug/error) when trying to parse a JSON string returned from the server: ``` Timestamp: 10/04/2013 21:05:12 Error: SyntaxError: JSON.parse: unexpected character Source File: http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js Line: 3 ``` and I noticed that the JSON.parse works fine when the header Content-type is not set to 'application/json' but does not work if Content-type is set to json. any idea why this would happen? Not Working Code: Controller code: ``` $response = array('data' => array('msg' => 'Form did not validate'), 'response_handler_fn' => 'sign_up_response_handler_fn'); $this->getResponse()->setHttpHeader('Content-type','application/json'); return $this->renderText(json_encode($response)); ``` Javascript: ``` // ... success: function( response ) { var responseData = $.parseJSON(response); } ``` Headers ``` Cache-Control no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Connection Keep-Alive Content-Length 92 Content-Ty…

Accepted Answer

When you don't specify the `dataType` option for the `$.ajax` call, jQuery attempts to parse the response according to the `Content-Type` header returned in the response.

So when you specify nothing for the `dataType`, and nothing special for the `Content-Type` header, `response` is parsed as text.

When you specify nothing for the `dataType`, and "json" for the `Content-Type` header, `response` is parsed as JSON (Javascript object literal).

When you specify the `dataType` as "json", it doesn't matter what the `Content-Type` header, the `response` is parsed as JSON (Javascript object literal).

Trying to pass an object literal to `JSON.parse` will fail, as it only accepts a string.

So you need to determine what things you're setting and what you're trying to call (`JSON.parse`), and use the right combination.

JSON.parse() does not work when content-type is set to application/json

Solution

Problem