Whats wrong with this JSON?

Question

The following JSON is what I am sending back to my jQuery script from the server.

{"items": [
{ "id": "116", "first_name": "Sean", "last_name": "borsen" },
{ "id": "871", "first_name": "Sergio", "last_name": "spake" },
{ "id": "1337", "first_name": "SethTest", "last_name": "Test" }
],
"message": "success"
}

I intend to use this object to build an html table. When I return this type of JSON though, I get either of the following 2 errors in Chrome:

Uncaught SyntaxError: Unexpected token ','

or this error

Uncaught SyntaxError: Unexpected token ':'

Here is my AJAX post code

 $.ajax({
 url: "ClientEmarGroup.aspx",
 datatype: 'json',
 data: eval('(' + d + ')'),
 success: bindData
 });

Here is the line I get the error on in my bindData function:

 bindData = function (data) {
 var $d = eval("(" + data + ")");

Further, I get the script to work if I format my JSON items like so:

{"items": [
{ "id": "116", "name": "Sean borsen" },
{ "id": "871", "name": "Sergio spake" },
],
"message": "success"
}

But thats not what I want.

So my question is, what is wrong with my JSON string formatting that is preventing me from sending a complex object back to jQuery?

How do I format my JSON to return an array of items that have more than 2 properties?

• ThiefMaster: You don't prefix variables with $ in Javascript. While it's valid it's ugly - unless it's var $this = $(this);
• tvanfosson: @ThiefMaster - in this particular case I agree, but I would say anytime the variable contains a reference to a jQuery object it would be acceptable, i.e., var $form = $('form'); or var $menuItems = $('li.menuitem');
• Sage: @ThiefMaster, I appreciate your answer below. you were very quick on the draw. however, not using $ in variable names is more of a preference rather than a best practice. The var in question is referencing a jQuery object and is also being used as a jQuery object later in the function.
• ThiefMaster: var $d = eval("(" + data + ")"); is not a jQuery object if the input is JSON. And if it's plain javascript, you should use dataType: 'script' to let jQuery execute it for you.

Answer 1

You have spelled the proeprty dataType wrong, note the capital T.

This causes jQuery to try to find out by itself what the data type is, and if you don't serve the JSON with the correct content type, it will try to parse it as something else, like XML.

If jQuery manages to guess the data type correctly, it will parse the string to an object before calling the success function, so you should not parse the data again.

Note: If you need to parse JSON, you should note the eval function, you should use the $.parseJSON method.

• Sage: Nice Catch Guffa!! I have used this code quite a few times in various places and have yet to notice that. It wasnt erroring out
• Sage: in fact, I accepted your answer (even though others had already pointed out to stop using eval()) because you 1) caught the misspelling error, 2) talked about what that was causing jQuery to do behind the scenes, 3) spoke of how there was no need to eval or parseJSON if we did things right in the first place, 4) spoke of how if we must parse JSON, to use parseJSON over eval() Your answer was by far the most thorough answer.

Answer 2

There is nothing wrong with your JSON (and you can use JSONLint to check).

You should ditch the JSON to native types with eval(), especially since jQuery has $.parseJSON().

• Sage: yeah, I had tried that and it wasnt working either. There had to have been something else wrong since I cannot reproduce the issue this morning.

Answer 3

It is perfectly valid.

But you shouldn't use eval() but JSON.parse() to parse JSON. To get a fallback for browsers not having builtin JSON support, also embed json2.js

Answer 4

If you tell jQuery that you are expecting json, it will unpack it for you and call your success function with the proper object. You don't need to parse the response yourself. Also, jQuery will properly encode an object or use a string in URL-encoded request parameter format so you don't need an eval there either. If you are sending JSON, then you'll want to use JSON.stringify() on the object and set the contentType to 'application/json' as well as the dataType (as @Guffa noted, cased correctly) to 'json'

$.ajax({
 url: "ClientEmarGroup.aspx",
 dataType: 'json',
 data: d,
 success: function(data) {
 // now simply use the data, you don't need the eval
 }
});

Answer 5

missing closing one:

var bindData = function (data) {
 var $d = eval("(" + data + ")");
}; // here

• Sage: there is more to that function that just an eval, I only copied the function opening to show the line resulting in the error, which based on all the above comments, was one of the big things I have been doing wrong (the use of eval()) in general.