title: Creating a table to display json data with dynamic columns
body: <p>I am receiving Json formatted data from my WebMethod as:-</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $.ajax({
              type: "POST",
              url: "Customer_History.aspx/GetData",
              dataType: "json",
              contentType: "application/json; charset=utf-8",
              success: function (data) {
                  var returnedstring = data.d;
  
                 }
          })
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The data is:- [Customer Name, Year : Money_Spent]. For every year (2000,2001...2017), a customer has spent some money with an online shopping agency. </p>
  
  <p>Example:-<code>[{"Customer Name":"XXXX","1999":76.000,"2000":68.000,"2001":49.000,"2002":41.000,"2003":47.000,"2004":56.000,"2005":33.000,"2006":51.000,"2007":56.000,"2008":52.000,"2009":55.000,"2010":52.000,"2011":57.000,"2012":55.000,"2013":93.000,"2014":92.000,"2015":62.000,"2016":71.833},{"Customer Name: "YYYY",......... etc etc</code></p>
  
  <p>Now because the columns for years is dynamic. I am thinking I have to parse the data, find the min year value and max year value and then create a table structure based on that such that it looks like this:-</p>
  
  <pre><code>Customer | 1999 | 2000 | 2001 -----&gt;
  --------------------------------
   XXXX    | $$   | $$   | $$ ---------&gt;
  --------------------------------
   YYYY    | $$   | $$   | $$ ---------&gt;
  --------------------------------
  </code></pre>
  
  <p>I was also thinking once the column names have been defined, use jquery datables() to place the data in it.</p>
  
  <p>Does anyone have more elegant/efficient suggestions?</p>