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-Type    application/json
Date    Wed, 10 Apr 2013 20:05:12 GMT
Expires Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive  timeout=15, max=100
Pragma  no-cache
Server  Apache
X-Powered-By    PHP/5.3.5

Response:

{"data":{"msg":"Form did not validate"},"response_handler_fn":"sign_up_response_handler_fn"}

Code that Does Work

Controller:

  $response = array('data' => array('msg' => 'Form did not validate'), 'response_handler_fn' => 'sign_up_response_handler_fn');
  return $this->renderText(json_encode($response));

Javascript the same as the one which does work

Headers:

Cache-Control   no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection  Keep-Alive
Content-Length  92
Content-Type    text/html; charset=utf-8
Date    Wed, 10 Apr 2013 20:09:04 GMT
Expires Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive  timeout=15, max=100
Pragma  no-cache
Server  Apache
X-Powered-By    PHP/5.3.5

Response:

{"data":{"msg":"Form did not validate"},"response_handler_fn":"sign_up_response_handler_fn"}

Answer 1

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.

Answer 2

if Content-type is set to json and pass the response as json then you need to set the

dataType:"json"

in your ajax.Otherwise it will not work.I guess its the problem.If its not shown your ajax also.

Answer 3

@Ian answer is complete, but was somewhat obscure at first glance for me.
Just to simplify: if you specified JSON in both request (dataType: "JSON") and response ('Content-type','application/json'), then response is already a JSON object, no need to parse it.

Instead of
var responseData = $.parseJSON(response);
, just:
var responseData = response.