title: Returning dictionary as JSON and successfully accessing it's contents withing JS function - C#
body: <p>I have a <code>Dictionary</code> named <code>finalDictionary</code> which is created by consolidating multiple Dictionaries.
  This is the piece of code which I use to create this Dictionary:</p>
  
  <pre><code>Dictionary&lt;string, Dictionary&lt;DateTime, int&gt;&gt; finalDictionary= new Dictionary&lt;string, Dictionary&lt;DateTime, int&gt;&gt;();
  
  finalDictionary.Add("Data1", listData1.ToDictionary(x =&gt; x.Date, y =&gt; y.Value));
  finalDictionary.Add("Data2", listData2.ToDictionary(x =&gt; x.Date, y =&gt; y.Value));
  finalDictionary.Add("Data3", listData3.ToDictionary(x =&gt; x.Date, y =&gt; y.Value));
  </code></pre>
  
  <p>NOTE: <code>listData1</code>, <code>listData2</code> and <code>listData3</code> are all anonymous lists which I'm converting into dictionaries in the above code.</p>
  
  <p>Here's the sample format for each of these dictionaries: (let's consider for <code>Data1</code>)</p>
  
  <pre><code>Key : 'Data1'
  Value : 
          [0] {[6/14/2015 12:00:00 AM, 1]}
          [1] {[6/21/2015 12:00:00 AM, 0]}
          [2] {[6/28/2015 12:00:00 AM, 0]}
          [3] {[7/5/2015 12:00:00 AM, 0]}
          [4] {[7/12/2015 12:00:00 AM, 0]}
          [5] {[7/19/2015 12:00:00 AM, 0]}
          [6] {[7/26/2015 12:00:00 AM, 0]}    
  </code></pre>
  
  <p>So each of the dates above are again <code>Key</code> part and those numbers are <code>Value</code> part.</p>
  
  <p>I return this Dictionary i.e <code>finalDictionary</code> as a JSON result from my <strong>controller</strong> method as follows :</p>
  
  <pre><code>return Json(new { Result = "OK", Records = obj.GetDetails()}, JsonRequestBehavior.AllowGet);
  </code></pre>
  
  <p>But when this is returned back to my calling JS ajax it fails throwing the below Internal Server 500 error:</p>
  
  <pre><code>jqXHR = {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}, textStatus = "error", errorThrown = "Internal Server Error //and so on
  </code></pre>
  
  <p>Here's my JS code :</p>
  
  <pre><code>function loadDetails() {
  
      $.ajax({
          type: 'GET',
          dataType: 'json',
          contentType: "application/json; charset=utf-8",
          cache: false,
          url: _WebRoot() + '/Charts/GetDetails',
          success: function (response, textStatus, jqXHR) {
              prepareData(response.Records, 'Text Title');
          },
          error: function (jqXHR, textStatus, errorThrown) {
              alert('Error - ' + errorThrown);
          }
      });
  }
  </code></pre>
  
  <p>What modifications do I need to make it work?</p>
  
  <p><strong>NOTE : I receive the above mentioned error after the data is returned from the Controller and reaches the JS method</strong></p>