Question

我是编码的初学者，目前我正尝试从json文件中获取信息并以html创建表格。我正在使用原子代码编辑器，并且试图通过使用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
    }
 ]

Answer 1

假设您具有格式良好的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>

使用jQuery将JSON转换为HTML表格

1 个答案: