如何将JSON对象转换为HTML表格？

Question

我有一个看起来像这样的JSON对象：

{"a": 1, "b": 3, "ds": 4}

我想将它转换成一个HTML表格，看起来像这样：

name | Value
a     1
b     3
ds    4

有人能告诉我如何实现这个吗？

- user2565192

Answer 1

使用jQuery非常简单:

$(function() {
  var jsonObj = $.parseJSON('{"a":1,"b":3,"ds":4}');
  var html = '<table border="1">';
  $.each(jsonObj, function(key, value) {
    html += '<tr>';
    html += '<td>' + key + '</td>';
    html += '<td>' + value + '</td>';
    html += '</tr>';
  });
  html += '</table>';
  $('div').html(html);
});

这里有一个链接指向可用的 fiddle。

更新：另一种实现方式是使用称为 dynatable 的库将 JSON 转换为可排序的表格。

- Chalist

---

你的代码比我之前写的简单得多，而且更加清晰易懂。谢谢……救了我的一命！ - BeemerGuy

Answer 2

您可以使用JavaScript：

<script type="text-javascript">
  var data = {
    "a": 1,
    "b": 3,
    "ds": 4
  };
  // Create a new table
  var table = document.createElement("table");
  // Add the table header
  var tr = document.createElement('tr');
  var leftRow = document.createElement('td');
  leftRow.innerHTML = "Name";
  tr.appendChild(leftRow);
  var rightRow = document.createElement('td');
  rightRow.innerHTML = "Value";
  tr.appendChild(rightRow);
  table.appendChild(tr);
  // Add the table rows
  for (var name in data) {
    var value = data[name];
    var tr = document.createElement('tr');
    var leftRow = document.createElement('td');
    leftRow.innerHTML = name;
    tr.appendChild(leftRow);
    var rightRow = document.createElement('td');
    rightRow.innerHTML = value;
    tr.appendChild(rightRow);
    table.appendChild(tr);
  }
  // Add the created table to the HTML page
  document.body.appendChild(table);
</script>

生成的HTML结构如下：

<table>
  <tr>
    <td>Name</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>a</td>
    <td>1</td>
  </tr>
  <tr>
    <td>b</td>
    <td>3</td>
  </tr>
  <tr>
    <td>ds</td>
    <td>4</td>
  </tr>
</table>

这里是链接到正在运行的示例代码的地址。

- Aurélien Gasser

Answer 3

你应该看一下Knockout.js，借助它，你可以将JSON数据绑定到HTML元素上。

然后自动更新，所以你不必自己操心。

这里是示例列表。

- Rob