Undefined Error in parsing JSON in ajax function in .NET MVC

Question

Jquery

$('#PostComment').click(function () {
 var commentTitle = $('#commentTitle').val();
 var commentClob = $('#commentClob').val();
 var id = $('#topicId').val();
 var buttoname = $('#PostComment').val();
 var obj;
 $.ajax({
 type: "post",
 url: "../../Handler/Topic.ashx",
 data: "commentclob=" + commentClob + "&commenttitle=" + 
 commentTitle + "&topicId=" + id + "&Button=" + buttoname,
 success: function (msg) {
 try {
 alert(msg);
 obj = jQuery.parseJSON(msg);
 alert("Correct" + obj.CommentClob);
 }
 catch (e) {
 alert("Incorrect" + e.Description + e.ErrorNumber);
 }
 }
 });
 return false;
 });
 });

Topic.ashx -ProcessRequest method

 CommentModel cm = daoobject.populateCommentModel(listcommentsbytopic);
 var json= cm.CreateCommentJson();
 context.Response.Write(json);

Function definition

 public string CreateCommentJson()
 {
 // serialize the names to JSON
 var jss = new JavaScriptSerializer();
 var json = jss.Serialize(this);
 return json;
 }

I am getting output 2 alert boxes

first is

 { "UserId": "1", "ToipicId": "44f94c32-c415-4751-812a-03b775775698", "CommentId": "0f1014a0-08d9-48f7-9a0c-d9d6b3d841b2", "CommentClob": "ilikeit", "CommentTitle": "nice", "DescriptionClob": null, "DateCreated": "/Date(1333233498780)/", "Datemodified": "/Date(-62135596800000)/" }

and second is

Incorrect undefined undefined

Can anyone help.

• g19fanatic: we need more information on what you're trying to do. This is an ajax request to an 'ashx' page. From the looks of it, the returned data is malformed... run through jsonlint.com to see what I mean.
• coder25: Parse error on line 1: "{ \"UserId\": \ ^ Expecting '{', '[' is what am getting after validating

Answer 1

Your returned json is malformed. You should not be escaping all of the " as you are.

Run your json response msg through http://jsonlint.com and then run this one through it.

{
 "UserId": "1",
 "ToipicId": "44f94c32-c415-4751-812a-03b775775698",
 "CommentId": "0f1014a0-08d9-48f7-9a0c-d9d6b3d841b2",
 "CommentClob": "ilikeit",
 "CommentTitle": "nice",
 "DescriptionClob": null,
 "DateCreated": "/Date(1333233498780)/",
 "Datemodified": "/Date(-62135596800000)/"
}

---

Follow on:

In your comments, you state that you are getting the first alert printed out. If you are getting it printed out as you say, then that shows that the data is still in string format and NOT already parsed as json. If it were already parsed as json, you'd be getting an [Object object] message instead of the actual text.

That being said, check out this jsFiddle and this resulting screenshot of a Firebug breakpoint.

This essentially shows that the .parseJSON() function will properly parse this new 'json string'. From what you've given us, it tells me that you haven't given us everything. You are doing something (possible typo?, more processing that isn't getting posted?, something!) to that string (if in fact you are getting it as stated) before you parse it with JQuery.

• g19fanatic: checkout this page (msdn.microsoft.com/en-us/library/…) for some information on how to properly serialize data into JSON format with asp.net
• coder25: Parse error on line 1: "{ \"UserId\": \ ^ Expecting '{', '[' is what am getting after validating
• g19fanatic: Right... Meaning your asp.net is returning data that improperly formatted for json. Post your asp.net to get anywhere...
• coder25: Now I am getting the same json as u posted but i am unable to parse it

Answer 2

Use obj.CommentClob instead of obj[0].CommentClob as the json is not an array..

Additionally you can give another option dataType: 'json' to the .ajax() call and have jQuery handle the parsing.. (or use $.getJSON() directly)

• coder25: changing dataType to json is not causing Handler to be called
• Gabriele Petrioli: @prerna, if the msg holds indeed the data you posted it should work.. check out jsfiddle.net/gaby/QVPSb What version of jQuery are you using ?
• Gabriele Petrioli: @prerna, does the returned JSON string contain the first and last " ? it should not be wrapped in those..
• coder25: i am using jquery 1.5.1 version

Answer 3

Your json is not an array it is a key value pair object.

There is a run time error on this line alert("Correct" + obj[0].CommentClob). Change this line to alert("Correct" + obj.CommentClob);

As a side note, in order to get the error message from exception object(e) use e.message or e.description and for error number use e.number. Since JavaScript is case sensitive e.Description or e.Number will give you undefined value.

Working demo - http://jsfiddle.net/MuEYt/

• coder25: e.message is giving undefined and alert("Correct" + obj.CommentClob) is not woking
• coder25: e.Number is also giving undefined
• ron tornambe: JavaScript is case sensitive. You must use e.number as ShankarSangoli indicated. I tried pulling the try/catch code out of $.ajax and created a variable set to the returned JSON (msg) from your first alert and it works fine. Does this work for you?
• coder25: yes it is giving correct output in fiddle but why inside ajax function it is giving undefined

Answer 4

I think you are parsing listcommentsbytopic to json twice.

first time here:

CommentModel cm = daoobject.populateCommentModel(listcommentsbytopic);
var json= cm.CreateCommentJson();
context.Response.Write(json);

second time here:

obj = jQuery.parseJSON(msg);

above line is not needed

when you are sending json data from server why are you not using

dataType: 'json'

in below function

$('#PostComment').click(function () {
 var commentTitle = $('#commentTitle').val();
 var commentClob = $('#commentClob').val();
 var id = $('#topicId').val();
 var buttoname = $('#PostComment').val();
 var obj;
 $.ajax({
 type: "post",
 url: "../../Handler/Topic.ashx",
 data: "commentclob=" + commentClob + "&commenttitle=" + 
 commentTitle + "&topicId=" + id + "&Button=" + buttoname,
 dataType: 'json', /// this one expect data in json format
 success: function (msg) {
 try {
 alert(msg);
 obj = jQuery.parseJSON(msg);
 alert("Correct" + obj.CommentClob);
 }
 catch (e) {
 alert("Incorrect" + e.Description + e.ErrorNumber);
 }
 }
 });
 return false;
 });
 });

• Useless Code: jQuery.parseJSON does not encode objects as JSON, it takes a JSON string and turns it into a JavaScript Object. Adding dataType: 'json' to the jQuery.ajax call will automatically return JavaScript objects if the Ajax response is a well-formed JSON string, essentially doing the same thing that manually running it through jQuery.parseJSON. Your code uses dataType: 'json' and then tries to run that JavaScript object through jQuery.parseJSON, which will cause errors since it is already an object.