JSON.Parse,'Uncaught SyntaxError: Unexpected token o [duplicate]

Question

I am having trouble with JSON returned from a web service. It looks like the JSON lacks quotes, but when I add quotes to the JSON, I get an error. Here is the error message: 'Uncaught SyntaxError: Unexpected token o. When I log the string to console:[object Object],[object Object]

Here is some example code that simulates the error:

//Error I am trying to solve var jsonString = '[{"Id":"10","Name":"Matt"},{"Id":"1","Name":"Rock"}]'; var myData = JSON.parse(jsonString);  $(document).ready(function() {     var $grouplist = $('#groups');     $.each(myData, function() {         $('<li>' + this.Name + '</li>').appendTo($grouplist);     }); }); 

Here is the same code with the single quotes around the string. It works

//Successful Javascript var jsonString = '[{"Id":"10","Name":"Matt"},{"Id":"1","Name":"Rock"}]'; var myData = JSON.parse(jsonString);  $(document).ready(function() {     var $grouplist = $('#groups');     $.each(myData, function() {         $('<li>' + this.Name + '</li>').appendTo($grouplist);     }); });  //Successful HTML <ul id="groups"></ul> 

But when I try to add quotes to the string, like I seem to need to in my real code, it fails:

//Does not work when I need to append quotes to the string: var jsonStringNoQuotes = [{"Id":"10","Name":"Matt"},{"Id":"1","Name":"Rock"}]; jsonStringQuotes = "'" + jsonStringNoQuotes + "'"; var myData = JSON.parse(jsonStringQuotes);  $(document).ready(function() {     var $grouplist = $('#groups');     $.each(myData, function() {         $('<li>' + this.Name + ',' +  this.Id + '</li>').appendTo($grouplist);     }); }); 

Here is the error: log string to console:[object Object],[object Object] data.js:809 Uncaught SyntaxError: Unexpected token '

I'm stumped. Any help appreciated! Thank you!

Answer 1

Without single quotes around it, you are creating an array with two objects inside of it. This is JavaScript's own syntax. When you add the quotes, that object (array+2 objects) is now a string. You can use JSON.parse to convert a string into a JavaScript object. You cannot use JSON.parse to convert a JavaScript object into a JavaScript object.

//String - you can use JSON.parse on it var jsonStringNoQuotes = '[{"Id":"10","Name":"Matt"},{"Id":"1","Name":"Rock"}]';  //Already a javascript object - you cannot use JSON.parse on it var jsonStringNoQuotes = [{"Id":"10","Name":"Matt"},{"Id":"1","Name":"Rock"}]; 

Furthermore, your last example fails because you are adding literal single quote characters to the JSON string. This is illegal. JSON specification states that only double quotes are allowed. If you were to console.log the following...

console.log("'"+[{"Id":"10","Name":"Matt"},{"Id":"1","Name":"Rock"}]+"'"); //Logs: '[object Object],[object Object]' 

You would see that it returns the string representation of the array, which gets converted to a comma separated list, and each list item would be the string representation of an object, which is [object Object]. Remember, associative arrays in javascript are simply objects with each key/value pair being a property/value.

Why does this happen? Because you are starting with a string "'", then you are trying to append the array to it, which requests the string representation of it, then you are appending another string "'".

Please do not confuse JSON with Javascript, as they are entirely different things. JSON is a data format that is humanly readable, and was intended to match the syntax used when creating javascript objects. JSON is a string. Javascript objects are not, and therefor when declared in code are not surrounded in quotes.

See this fiddle: http://jsfiddle.net/NrnK5/

Answer 2

var jsonStringNoQuotes = [{"Id":"10","Name":"Matt"},{"Id":"1","Name":"Rock"}]; 

it will create json object. no need to parse.

jsonStringQuotes = "'" + jsonStringNoQuotes + "'"; 

will return '[object]'

thats why it(below) is causing error

var myData = JSON.parse(jsonStringQuotes);