如何基于JSON创建HTML表格

Question

我需要根据JSON输入创建HTML表格。这是我的JSON示例输入。

[
  {
    "UserID": 1,
    "UserName": "rooter",
    "Password": "12345",
    "Country": "UK",
    "Email": "[e-mail]"
  },
  {
    "UserID": 2,
    "UserName": "binu",
    "Password": "123",
    "Country": "uk",
    "Email": "[e-mail]"
  },
  {
    "UserID": 3,
    "UserName": "cal",
    "Password": "123",
    "Country": "uk",
    "Email": "[e-mail]"
  },
  {
    "UserID": 4,
    "UserName": "nera",
    "Password": "1234",
    "Country": "uk",
    "Email": "[e-mail]"
  }
]

预期结果：

我需要在网页加载时完成这个操作。

- Rooter

---

你需要什么具体的帮助吗？你能和我们分享一下你已经尝试过的吗？如果我们知道了你选择的方向，帮助你就会更容易些。 - Lix

所以循环并构建一个表格。你知道如何遍历数组吗？你知道如何构建字符串吗？ - epascarello

我认为如果你不知道特定的键，你必须使用递归来完成这个任务。 - Maciej Kozieja

@epascarello 不好意思，我不知道朋友 :( 你能给我提供一些示例代码来完成这个吗？ - Rooter

如果你有一个对象内部嵌套了另一个对象，那么这个循环会变得非常复杂。 - Maciej Kozieja

Answer 1

遍历您的JSON数组中的所有元素，并将所有不同的键保存到JavaScript数组或类似数组中。

然后，使用所有这些键创建表格和表头行以及列。

接着，遍历所有JSON对象并为每个对象打印一行。

var data = [
  {
    "UserID": 1,
    "UserName": "rooter",
    "Password": "12345",
    "Country": "UK",
    "Email": "[e-mail]"
  },
  {
    "UserID": 2,
    "UserName": "binu",
    "Password": "123",
    "Country": "uk",
    "Email": "[e-mail]"
  },
  {
    "UserID": 3,
    "UserName": "cal",
    "Password": "123",
    "Country": "uk",
    "Email": "[e-mail]"
  },
  {
    "UserID": 4,
    "UserName": "nera",
    "Password": "1234",
    "Country": "uk",
    "Email": "[e-mail]"
  }
];

var keys = [];

document.write("<table border==\"1\"><tr>");
for (key in data[0]) {
 document.write('<td>' + key + '</td>');
}
document.write("</tr>");
for (var i = 0; i < data.length; i++) {
 document.write('<tr>');
 for (key in data[i]) {
   document.write('<td>' + data[i][key] + '</td>');
  }
 document.write('</tr>');
}
document.write("</table>");

- tilz0R

---

谢谢tilz0R，你能给我提供一些示例代码吗？:( - Rooter

需要更多的证据吗？http://screencloud.net/v/io3lk 不知道你从哪里听到那个信息。仍然不知道为什么会被踩。 - ringbuffer_peek

@tilz0R - 我觉得这可能让我有点困惑 - https://dev59.com/mXE95IYBdhLWcg3wUcRn#2360112。`document.write` 会在页面已经加载时替换内容。 - Lix

我个人从未使用过document.write，但在这里和W3Schools上它的工作方式是相同的。 - ringbuffer_peek

@tilz0R - 当使用沙盒代码预览工具时，结果可能会有所不同。jsfiddle.net甚至不允许在其服务中使用document.write。（我也从不使用document.write。） - Lix

Answer 2

我已经为您完成了工作，因为您不知道该怎么做。请按照下面的代码进行更改，以满足您应用程序的需求。但是，您需要包含由您的服务器托管的库文件以获得更快的结果：

完整代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var data = [
  {
    "UserID": 1,
    "UserName": "rooter",
    "Password": "12345",
    "Country": "UK",
    "Email": "[e-mail]"
  },
  {
    "UserID": 2,
    "UserName": "binu",
    "Password": "123",
    "Country": "uk",
    "Email": "[e-mail]"
  },
  {
    "UserID": 3,
    "UserName": "cal",
    "Password": "123",
    "Country": "uk",
    "Email": "[e-mail]"
  },
  {
    "UserID": 4,
    "UserName": "nera",
    "Password": "1234",
    "Country": "uk",
    "Email": "[e-mail]"
  }
];
$(document).ready(function () {
    var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;
    $.each(data[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data, function(index, value){
         html += '<tr>';
        $.each(value, function(index2, value2){
            html += '<td>'+value2+'</td>';
        });
        html += '<tr>';
     });
     html += '</table>';
     $('body').html(html);
});
</script>

并且它会看起来像下面的图片：

- Rana Ghosh

---

你已经硬编码了表格的列。问题是根据提供的JSON对象构建表格。对该对象的任何更改都会破坏你的代码。 - Lix

另外，您忘记提到您使用的一个依赖关系。如果我没记错，“table-striped”来自“Bootstrap”。 - Lix

是的，我正在发送，请稍等。 - Rana Ghosh

@Rooter 请按照我的更新答案操作。 - Rana Ghosh

@rooter 如果对您起作用，请接受答案以帮助其他人。 - Rana Ghosh

Answer 3

这是我本来会做的事情。

var object = [
  {
    "UserID": 1,
    "UserName": "rooter",
    "Password": "12345",
    "Country": "UK",
    "Email": "[e-mail]"
  },
  {
    "UserID": 2,
    "UserName": "binu",
    "Password": "123",
    "Country": "uk",
    "Email": "[e-mail]"
  },
  {
    "UserID": 3,
    "UserName": "cal",
    "Password": "123",
    "Country": "uk",
    "Email": "[e-mail]"
  },
  {
    "UserID": 4,
    "UserName": "nera",
    "Password": "1234",
    "Country": "uk",
    "Email": "[e-mail]"
  }
];


function createTable(){
 $('#content').append('<table id="jsonTable"><thead><tr></tr></thead><tbody></tbody></table>');
 
  $.each(Object.keys(object[0]), function(index, key){
    $('#jsonTable thead tr').append('<th>' + key + '</th>');
  }); 
  $.each(object, function(index, jsonObject){     
    if(Object.keys(jsonObject).length > 0){
      var tableRow = '<tr>';
      $.each(Object.keys(jsonObject), function(i, key){
         tableRow += '<td>' + jsonObject[key] + '</td>';
      });
      tableRow += "</tr>";
      $('#jsonTable tbody').append(tableRow);
    }
 });
}

$(document).ready(function(){
  createTable();
});

tr:nth-child(even) td {background: #f2f2f2}

table{
 border-collapse: collapse;
}
table td, table th{
 border: 1px solid black;
  text-align: left;
}
table thead{
 background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content"></div>

- Brent Boden

---

您正在根据提供的JSON动态创建表头，但在填充表格时仍在使用硬编码键 - 如果JSON发生任何更改（添加额外的键），此代码将会出错。 - Lix

@Lix 我刚刚修改了我的代码，这样如果你添加了一个新的键，它就可以工作了。 - Brent Boden

Answer 4

var data = jsonObject;
var table = document.createElement("table");
var tr = document.createElement("tr");
var thUserID = document.createElement("th");
var thUserName = document.createElement("th");
var thPassword = document.createElement("th");
var thCountry = document.createElement("th");
var thEmail = document.createElement("th");
thUserID.innerText = "userID";
thUserName.innerText = "userName";
thPassword.innerText = "password";
thCountry.innerText = "country";
thEmail.innerText = "email";
tr.appendChild(thUserID);
tr.appendChild(thUserName);
tr.appendChild(thPassword);
tr.appendChild(thCountry);
tr.appendChild(thEmail);    
for(var i=0; i<data.length; i++) {
    var userID = data[i].UserID;
    var userName = data[i].UserName;
    var password = data[i].Password;
    var country = data[i].Country;
    var email = data[i].Email;
    var tr = document.createElement("tr");
    var tdUserID = document.createElement("td");
    tdUserID.innerText = userID;
    var tdUserName = document.createElement("td");
    tdUserName.innerText = userName;
    var tdPassword = document.createElement("td");
    tdPassword.innerText = password;
    var tdCountry = document.createElement("td");
    tdCountry.innerText = country;
    var tdEmail = document.createElement("td");
    tdEmail.innerText = email;
    tr.appendChild(tdUserID);
    tr.appendChild(tdUserName);
    tr.appendChild(tdPassword);
    tr.appendChild(tdCountry);
    tr.appendChild(tdEmail);
    table.appendChild(tr);
}
document.body.appendChild(table);

- user1529413

---

我看到你只是想帮忙 - 但这个解决方案太过硬编码了 - 一旦JSON数据发生变化（添加额外的键），这段代码就会出问题。 - Lix

我越来越不喜欢使用StackOverflow了。你问一个具体的问题，得到一个具体的答案。如果你愿意，你可以使用for（i in data）代替。 - user1529413

哇，我因为准确回答问题但未预见到 OP 可能想要不同的内容而被踩了？ - user1529413