JSON.parse not working in Chrome

Question

I have a strange problem I can't figure out. I is too simple to go wrong. The problem is present in Chrome 12.0.742.91 but works fine in IE8 8.0.6001.19048.

This is my AJAX callback function and this is the XMLHttpRequest instance.

// default AJAX callback handler
function Handler() {

  if (this.readyState == 4 && this.status == 200) {

    // alert(">>"+this.responseText+"<<");
    var Response = this.responseText;
    // Response = '{"Status":0,"Data":"My Data"}';

    document.getElementById("debug").innerHTML = Response;

    var Ajax = JSON.parse(Response);

    document.getElementById("Stat1").innerHTML = Ajax.Status+"<br />"+Ajax.Data;
  }

The AJAX server is sending {"Status":0,"Data":"Server Data"} and this is displayed exactly the same in the debug element; Server Data.

header('Content-type: application/json');
print '{"Status":0,"Data":"Server Data"}';

The alert(...) is displaying >>{"Status":0,"Data":"Server Data"}<<, no extra spaces in front or after JSON data.

But when parsed with JSON.parse() I get a javascript error: Illegal token.

However, if I hard code the same string (activates the remarked line) JSON.parse() works without error and displays the data (My Data) in the stat1 element.

In IE8 the Server Data version works flawless...

Have I overlooked something fundamental or is there a known issue with Chrome?

[EDIT] By request you will find the XMLHTTPRequest instance creation here:

// Create the XMLHttpRequest object
function GetHTTPRequestObject() {

  var httpRequest = null;

  if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari
    httpRequest = new XMLHttpRequest();
  } else {// code for IE6, IE5
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return httpRequest;
}

can you add the code that creates the XMLHttpRequest object. — James Khoury, Jun 14 '11 at 01:02
I just ran this: JSON.parse('{"Status":0,"Data":"Server Data"}') in the console and it worked successfully. I suspect the problem might be somewhere else. — datasage, Jun 14 '11 at 01:04
@James I have added the code for the instance creation. I think this is correct because the callback is called and displaying the correct data from the AJAX server (in Chrome) but JSON.parse doesn't work. — Max Kielland, Jun 14 '11 at 01:11
what does `alert(Response);` show? does it show correct string? `"` might be causing the error. — Praveen Lobo, Jun 14 '11 at 01:11
check if your script is sending extra whitespace (to be sure I never close the — cambraca, Jun 14 '11 at 01:13
Check out [this question's answer](http://stackoverflow.com/questions/6066901/invalid-json-in-chrome-no-problem-in-firefox-so-strange) :) — cambraca, Jun 14 '11 at 01:18
Working fine for me with your code > http://pastebin.com/RN3U2ZUu. Compare it with this pastebin and see where you're going wrong. — Naatan, Jun 14 '11 at 01:20
under your `var Response = ...` line add `alert('{"Status":0,"Data":"Server Data"}' === Response);` true or false? — James Khoury, Jun 14 '11 at 01:27
@Cambraca as I also suspected, it might have to do something with the character coding. I use UTF8 on my whole website, meaning headers, SQL and saved PHP files. — Max Kielland, Jun 14 '11 at 01:42
@Naatan, your test code works fine here too. I guess I have to slowly fill in my code and see where it goes wrong. I suspect the UTF8 coding now (saved PHP file). I will experiment a bit, thank you all for pointing me in one direction :) — Max Kielland, Jun 14 '11 at 01:44
@James You are right, it shows `false` so they are not of the same type? — Max Kielland, Jun 14 '11 at 01:51
Any chance you copied your JSON string from a non plain-text editor? Word editors and such will screw up your quotes and other special characters, and UTF-8 will gladly allow it. Try copying the JSON from the pastebin link I posted and using that instead in your PHP file. — Naatan, Jun 14 '11 at 02:13
@Max I'm taking a guess that you need to check @cambraca's comment as it would suggest there might be whitespace/new lines in the response. Check thinks like the length of `Response` and compare it to the length of what you are expecting (ie. 33 I think). — James Khoury, Jun 14 '11 at 02:15
Also make sure that your quotes are correct. Only double quotes are allowed, and properties must all have double quotes. Chrome isn't very forgiving about malformed syntax. — beatgammit, Jun 14 '11 at 02:21
After a copy paste into Notepad and then saving, it works. I suspect that the PHP file wasn't saved in the correct coding. Need to investigate the settings in RadPHP XE. It seems I can't select individual coding formats for different files in my project :( — Max Kielland, Jun 14 '11 at 02:46
Okej, I found out what it was. It was a BOM character sent when the PHP page loaded. To make the Ajax Client more robust, it detects if the first character is a BOM character, if yes, it's removed before JSON.parse(). — Max Kielland, Jun 14 '11 at 03:39
@Cambraca You went me into the direction of investigating the BOM character. Post an answer if you want the credit. No offence to every one else, you all did a great effort to help as well, thank you. — Max Kielland, Jun 14 '11 at 03:40

score 3 · Accepted Answer · edited May 23 '17 at 12:14

3

Check out this question's answer, it has to do with the Unicode BOM.

edited May 23 '17 at 12:14

Community

1
1

answered Jun 14 '11 at 14:24

cambraca

27,014
16
68
99

This link lead me to investigate the BOM character. My solution ended up in checking the Ajax stream for any BOM character and remove them before sending it to JSON.parse(...), With this solution It doesn't matter if PHP file is saved in UTF or not. – Max Kielland Jun 14 '11 at 14:34
@Max Kielland, I would suggest to remove BOM from PHP files (they still can be saved in UTF8; BOM is not required for this), as BOM may cause problems with sending HTTP headers (this includes `setcookie()` and `session_start()` calls). – binaryLV Jun 14 '11 at 14:39
@binaryLV In my development environment I can't select how each individual file is saved. For my own convenient, the whole project are using UTF8 to handle multiple languages. I'm in control of both the server and client end so I don't think it will be a problem... – Max Kielland Jun 14 '11 at 14:46

JSON.parse not working in Chrome

1 Answers1