Javascript Serializer in asp.net mvc produces malformed Json

Question

I am in asp.net mvc 3 with razor. The model is of type IList<PipeLineView>. The definition of PipeLineView is

public class PipeLineView
    {
        public string Stage { get; set; }
        public decimal Amount { get; set; }
        public string Color { get; set; }
        public int Count { get; set; }
        public int LevelNo { get; set; }
    }

In the view I am doing something like

JavaScriptSerializer serializer = new JavaScriptSerializer();
    var data = serializer.Serialize(Model);

and In the javascript I have

<script type="text/javascript">
 var data =JSON.parse(@Html.Raw(data));
</script>

When I load the page in firefox, I get the following js error

SyntaxError: JSON.parse: unexpected character
[Break On This Error]   

...":5,"LevelNo":1},{"Stage":"Level2","Amount":0.000,"Color":"Red","Count":0,"Level...

What could be the problem here? Thanks

Answer 1

JSON.parse expects a JSON string so you need to string quote the argument so add '' around the @Html.Raw(data):

<script type="text/javascript">
   var data = JSON.parse('@Html.Raw(data)');
</script>

But in your case you don't need to parse you can just write:

<script type="text/javascript">
   var data = @Html.Raw(data);
</script>