使用jquery将json转换为html表
使用jquery将json转换为html表
提问于 2018-08-15 02:51:26
我是一个编程的初学者，目前我正在尝试从我的json文件中获取信息，并在html中创建一个表。我正在使用atom代码编辑器，并试图通过使用jQuery让javascript遍历所有数据来制作一个表。我无数次地尝试使用jquery从我的json文件中提取信息，但我似乎做错了什么。我浏览了很多论坛，尝试过不同的代码，但似乎都不起作用。Json代码如下所示。谢谢。
[
{
"Season": 2006-2007,
"Team": "P4two Ballers Osnabrueck",
"Games": 32,
"FG%": 65,
"FT%": 71,
"Assists": 4.5,
"Steals": 1.8,
"Blocks": 1.5,
"TRB": 11.9,
"Points Per Game": 16.7
},
{
"Season": 2007-2008,
"Team": "TG Renesas Landshut",
"Games": 26,
"FG%": 67,
"FT%": 68,
"Assists": 5,
"Steals": 1.2,
"Blocks": 0.8,
"TRB": 16.3,
"Points Per Game": 14.5
},
{
"Season": 2008-2009,
"Team": "Head Attack Erding",
"Games": 20,
"FG%": 69,
"FT%": 75,
"Assists": 6.2,
"Steals": 2.3,
"Blocks": 1.2,
"TRB": 17.1,
"Points Per Game": 12.8
},
{
"Season": 2009-2010,
"Team": "Deportivo Espanol de Talca",
"Games": 22,
"FG%": 66.5,
"FT%": 71,
"Assists": 4.1,
"Steals": 2,
"Blocks": 2,
"TRB": 11.6,
"Points Per Game": 16.8
},
{
"Season": 2011,
"Team": "Club Trouville Montevideo",
"Games": 8,
"FG%": 65,
"FT%": 75,
"Assists": 4.8,
"Steals": 3,
"Blocks": 1.8,
"TRB": 15,
"Points Per Game": 25
},
{
"Season": 2011-2012,
"Team": "San Isidro San Francisco",
"Games": 54,
"FG%": 62,
"FT%": 68,
"Assists": 4,
"Steals": 2.3,
"Blocks": 1.1,
"TRB": 13,
"Points Per Game": 12.5
},
{
"Season": 2012-2013,
"Team": "Club Providencia",
"Games": 48,
"FG%": 64.5,
"FT%": 70,
"Assists": 6,
"Steals": 3.8,
"Blocks": 2.1,
"TRB": 13,
"Points Per Game": 25
},
{
"Season": 2013,
"Team": "Academia de la Montana",
"Games": 17,
"FG%": 59.9,
"FT%": 62,
"Assists": 1.5,
"Steals": 1.2,
"Blocks": 1,
"TRB": 11.4,
"Points Per Game": 18.4
},
{
"Season": 2013-2014,
"Team": "Baskets Vilsbiburg",
"Games": 26,
"FG%": 59.3,
"FT%": 49.6,
"Assists": 1.5,
"Steals": 1.3,
"Blocks": 2,
"TRB": 14.8,
"Points Per Game": 24.7
},
{
"Season": 2015,
"Team": "Pirates de Bogota",
"Games": 20,
"FG%": 59.3,
"FT%": 54.8,
"Assists": 1.7,
"Steals": 2.3,
"Blocks": 0.7,
"TRB": 10.9,
"Points Per Game": 14.3
},
{
"Season": 2015-2016,
"Team": "CD Tinguiririca San Fernando",
"Games": 17,
"FG%": 56.8,
"FT%": 61.4,
"Assists": 1.1,
"Steals": 2.2,
"Blocks": 0.9,
"TRB": 11,
"Points Per Game": 13.1
},
{
"Season": 2016-2017,
"Team": "CD Universidad Catolica de Santiago",
"Games": 39,
"FG%": 48.1,
"FT%": 56.1,
"Assists": 1.8,
"Steals": 2.3,
"Blocks": 0.7,
"TRB": 11.6,
"Points Per Game": 15.2
}
{
"Career": " ",
"Team": " ",
"Games": 329,
"FG%": 66.8,
"FT%": 65.2,
"Assists": 3.5,
"Steals": 2.2,
"Blocks": 1.3,
"TRB": 13.1,
"Points Per Game": 17.4
}
]回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-15 03:53:06
假设您有一个格式良好的JSON文件，您可以这样做：
$(document).ready(function() {
// $.getJSON(url, callback);
$.getJSON('https://api.myjson.com/bins/aruak', function(json) {
tableGenerator('#tableName', json);
});
});
function tableGenerator(selector, data) { // data is an array
var keys = Object.keys(Object.assign({}, ...data));// Get the keys to make the header
// Add header
var head = '<thead><tr>';
keys.forEach(function(key) {
head += '<th>'+key+'</th>';
});
$(selector).append(head+'</tr></thead>');
// Add body
var body = '<tbody>';
data.forEach(function(obj) { // For each row
var row = '<tr>';
keys.forEach(function(key) { // For each column
row += '<td>';
if (obj.hasOwnProperty(key)) { // If the obj doesnt has a certain key, add a blank space.
row += obj[key];
}
row += '</td>';
});
body += row+'<tr>';
})
$(selector).append(body+'</tbody>');
}<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<table id="tableName"></table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51848051
复制相关文章
相似问题