title: Passing correctly formatted JSON from .NET MVC Controller to View
body: <p>I'm using vis.js to create a timeline, and am trying to understand where I'm going wrong when trying to pass JSON from my model to the view. The timeline accepts data in JSON format, for example:</p>
  
  <pre><code>var data =  [
  {"content": "item 1", "start": "2016-08-20"},
  {"content": "item 2", "start": "2016-08-21"},
  {"content": "item 3", "start": "2016-08-21"}];
  </code></pre>
  
  <p>I have a model the looks like the following:</p>
  
  <pre><code>public class MyModel
  {
      public ModelData Data { get; set; }
      public IEnumerable&lt;TimeLineEntry&gt; Timeline { get; set; } 
      public string ChartData { get; set; }
  }
  </code></pre>
  
  <p>In my controller, I'm passing this model to the view as an ActionResult:</p>
  
  <pre><code>    public ActionResult Summary(FilterModel filter)
      {
          var modelData = GetModelData(filter);
  
          var timeline = BuildTimeLine(modelData);
  
          var chartData = BuildChartData(timeline);
  
          MyModel model = new MyModel
          {
              ModelData = modelData,
              Timeline = timeline,
              ChartData = chartData
          };
  
          return View(model); //setting a breakpoint here, ChartData JSON looks 
      }
  
      private string BuildChartData(List&lt;TimelineEntry&gt; data)
      {
          var timeline = data.Select(a =&gt; new
          {
              content = a.Description,
              start = a.CreatedOn
          });
  
          var jsonSerializer = new JavaScriptSerializer();
          return jsonSerializer.Serialize(timeline);
      }
  </code></pre>
  
  <p>In the view, I'm attempting to create a variable to store the JSON for use in the javascript application, like the following:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    // DOM element for the timeline
      var container = document.getElementById('visualization');
  
      var data = @Model.ChartData; //I have a feeling I can't define data like this due to the way it is compiled.
  
      var chartData = JSON.parse(data);
      var items = new vis.DataSet(chartData); //this takes JSON
  
    var options = {};
  
    var timeline = new vis.Timeline(container, items, options);
  &lt;/script&gt;
  </code></pre>
  
  <p>When the page is compiled, I'm getting a javascript error: 
  Uncaught SyntaxError: Unexpected token &amp;</p>
  
  <p>This happens when I try to store <code>@Model.ChartData</code> as a variable; it looks like this when compiled:
     <code>[{&amp;quot;content&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;start&amp;quot;:&amp;quot;\/Date(1471890279333)\/&amp;quot;},{ ..</code>..</p>
  
  <p>I feel like this is a simple problem, but I'm currently at a loss as to how to properly pass the JSON from model into the view.</p>