创建一个表动态列

Question

显示JSON数据我从我的WebMethod接收JSON格式的数据为： -

<script type="text/javascript"> 
    $(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; 

       } 
     }) 
    }); 
</script> 

的数据是： - [客户名称，年份：Money_Spent。每年（2000,2001 ... 2017），一位顾客花了一些钱在网上购物社。

例子： - [{"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

现在，因为多年来的列是动态的。我想我必须分析数据，找到最小年份值和最大值年份值，然后创建它看起来像此基础上，这样的表结构： -

Customer | 1999 | 2000 | 2001 -----> 
-------------------------------- 
XXXX | $$ | $$ | $$ ---------> 
-------------------------------- 
YYYY | $$ | $$ | $$ ---------> 
-------------------------------- 

我也在想，一旦列名称已被定义，请使用jquery datables（）将数据放入其中。

有没有人有更优雅/高效的建议？

Answer 1

在这里，你去了一个解决方案https://jsfiddle.net/qpu3cn5u/

var data = [{"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","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}]; 
 

 
var colHeader = Object.keys(data[0]); 
 

 
for(var i=0; i<colHeader.length; i++) { 
 
    $('table thead tr').append('<th>' + colHeader[i] + '</th>'); 
 
} 
 

 
for(var i=0; i<data.length; i++){ 
 
    $('table tbody').append('<tr></tr>') 
 
    for(var j= 0; j<colHeader.length; j++){ 
 
    $('table tbody tr').last().append('<td>' + data[i][colHeader[j]] + '</td>'); 
 
    } 
 
}

th, td { 
 
    border: 1px dashed #000; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr></tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>

只有你需要检查与客户名称件事马上就要结束了。

希望这会帮助你。