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}]

Answer 1

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.

Answer 2

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.