JSON to JavaScript, SyntaxError: Unexpected token &

Question

I know this question has been asked numerous times, but I really don ́t get it.

I am creating a site in MVC, and I'm creating a JSON string from my model. I then want to pass it as argument to a JavaScript function that uses it to plot a graph.

Here is were I create the JSON string. This indeed creates a valid JSON string, I checked it at JSONLint.

@{
 var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
 var weightsAsJsonString = serializer.Serialize(Enumerable.Select(Model, weight =>
 new
 {
 date = weight.Date,
 value = weight.Value
 }));
}

Further down I create a JavaScript variable from it and pass it into the JavaScript function:

var jsonStringToGraph = @weightsAsJsonString; 
google.setOnLoadCallback(drawVisualization(jsonstring));

When I run this, the console prints 'SyntaxError: Unexpected token &' at the line were I declare jsonStringToGraph. I googled around and concluded that I should put ' ' around @weightsAsJsonString, so I do that.

Anyway, in my drawVisualization, I do this:

function drawVisualization(teststring) {
 .......
 var parsedJson = JSON.parse(teststring);

This gives me SyntaxError: Unexpected token & Index:1 I know that the code at the bottom is what is causing the exception, but I do not understand why. Do anyone understand what I am doing wrong?

Edit: This is the weightsAsJsonString

[{"date":"\/Date(1434492000000)\/","value":100.2},{"date":"\/Date(1434578400000)\/","value":99.2},{"date":"\/Date(1434664800000)\/","value":101.2},{"date":"\/Date(1434751200000)\/","value":98.2},{"date":"\/Date(1434837600000)\/","value":97.2},{"date":"\/Date(1434924000000)\/","value":96.2},{"date":"\/Date(1435010400000)\/","value":95.2},{"date":"\/Date(1435096800000)\/","value":94.2}]

• Mike Cluck: Can you provide an example of what jsonStringToGraph looks like? I'd have to actually see the syntax in order to figure out what's wrong.
• hellogoodnight: I can´t set the breakpoint there, but I added the variable that it reads from

Answer 1

It sounds like your issue is trying to inject content via Razor into JavaScript. By default @ will HTML-encode your content, which doesn't work in the context of JavaScript.

@Html.Raw(weightsAsJsonString) will work better, and then your JS will have a JavaScript object, so there's no need for the JSON.parse later on.

• hellogoodnight: Thank you for taking your time, I will check it now
• hellogoodnight: so you mean that I do like this: ` var objects = @Html.Raw(weightsAsJsonString); google.setOnLoadCallback(drawVisualization(objects));`?
• Jacob: Yep, but you'll have to remove that JSON.parse from drawVisualization since it's not JSON but a JavaScript object at that point.

Answer 2

When you do var jsonStringToGraph = @weightsAsJsonString; you are actually defining a JSON object and not a JSON string.

Hence when you do JSON.parse(teststring); you are trying to parse an object instead of a string.

Either put apostrophes around the first declaration var jsonStringToGraph = '@weightsAsJsonString'; or simply do not try to parse it again.

• hellogoodnight: I did put apostrphes around my first declaration, this is what happends: When I run var objects = JSON.parse(teststring); in the JavaScript function, in throws the SyntaxError: Unexpected token & Index:1. Thanks for helping