How to properly decode a JSON string encoded using Html.Raw(Json.Encode(Model))?

Question

I am encoding some model data into a html element like this:

@Html.Raw(Json.Encode(Model));

The json string returned looks like this:

{"TestList":[{"FrequencyType":"1X","GCDs":"585.6","Identifier":"6144","SeqNo":9306,"SeqNoSpecified":true,"TSeqNo":8314,"TSeqNoSpecified":true,"TestDescr":"HBsAg"},{"FrequencyType":"1X","GCDs":"585.6","Identifier":"6124","SeqNo":9295,"SeqNoSpecified":true,"TSeqNo":8315,"TSeqNoSpecified":true,"TestDescr":"HCV Ab"},{"FrequencyType":"1X","GCDs":"585.3","Identifier":"6","SeqNo":9729,"SeqNoSpecified":true,"TSeqNo":8309,"TSeqNoSpecified":true,"TestDescr":"HD Monthly LS"}],"Frequency":[{"Key":"ANNUAL","Value":"Annually"},{"Key":"BIMONTH","Value":"Bi-Monthly"},{"Key":"BIWEEK","Value":"Bi-Weekly"},{"Key":"MON","Value":"Monthly"},{"Key":"1X","Value":"One Time"},{"Key":"QTR","Value":"Quarterly"},{"Key":"SMAN","Value":"Semi-Annual"},{"Key":"WEEK","Value":"Weekly"}]};

When I try to parse this using JSON.parse, I get an error:

arrayTestList = [];
var jsonTestList = $('#TestList').text();
jsonTestList = JSON.stringify(jsonTestList);
arrayTestList = JSON.parse(jsonTestList);
alert(arrayTestList.TestList[0]); // <===== this line is failing

Unable to get value of the property '0': object is null or undefined

How do I convert this jsonTestList string into a javascript array so that I can access elements of arrayTestList properly?

Edit:

Sorry, I forgot to mention my edit. Basically above javascript code is inside a Partial View 2. The code where I am json encoding the model is in another Partial View 1. From P V 2, I cannot access the model object of P V 1, so I am just dumping the contents into a div tag, so that I can access this list TestList element.

Solution 1

The issue is now resolved.

I was getting an invalid character, but couldn't immediately recognize which character it was that was causing the problem. I found that my JSON string isn't valid because of the trailing semicolon that was output by the Json.Encode method. I validated the JSON string @ http://jsonlint.com.

Once I removed that semicolon, the json string is populated as a JavaScript array into arrayTestList object.

Now just this works, as mentioned in both the answers above, JSON.stringify is not needed.

var arrayTestList = [];
var jsonTestList = $('#TestList').text().replace(";","");
arrayTestList = JSON.parse(jsonTestList);
alert(arrayTestList.TestList[0]); 

Solution 2

Try removing this line:

jsonTestList = JSON.stringify(jsonTestList);

jsonTestList is already a JSON string

Solution 3

Why are you using Json.Encode? Also in your code, why are you writing redundant code first you are using JSON.stringify and the JSON.parse same object.

jsonTestList = JSON.stringify(jsonTestList);
arrayTestList = JSON.parse(jsonTestList);

As per my understanding just Html.Raw will work

In JavaScript

var jsonObject = @Html.Raw(Model.TestList); //Here you will get JavaScript Object
var jsonTestList =  jsonObject.TestList;

Comments

[Animesh]

I get 0x800a03f6 - Microsoft JScript runtime error: Invalid character if I remove the line containing the JSON.stringify.

[Animesh]

Using only Html.Raw gives me the type of the model object and not the data inside it.

[Satpal]

@Animesh, OH! you have edited from @Html.Raw(Json.Encode(Model.TestList)); to @Html.Raw(Json.Encode(Model));, Can you please tell us what exactly you want to achieve in JavaScript? Maybe there is a better way to achieve it.

[Animesh]

I have edited the question for more clarity. Sorry about that.