如何在没有键的情况下在jquery中绑定json数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在没有键的情况下在jquery中绑定json数据相关的知识，希望对你有一定的参考价值。
如何在表格中附加数据... enter image description here
0
:
{createdBy: 1, UserName: "Anita Wilkins", 2018-02-01: "N/A", 2018-02-02: "N/A", 2018-02-03: "N/A", …}
1
:
{createdBy: 2, UserName: "Genson", 2018-02-01: "N/A", 2018-02-02: "N/A", 2018-02-03: "N/A", …}
length
:
2
__proto__
:
Array(0)
答案
您试图在不知道密钥的情况下迭代阵列。以下解决方案将为您完成。
<html>
<body>
<div id="showData"></div>
</body>
<script>
var tableData = [{
"createdBy": 1,
"UserName": "Anita Wilkins",
"2018-02-01": "N/A",
"2018-02-02": "N/A",
"2018-02-03": "N/A"
},
{
"createdBy": 2,
"UserName": "Genson",
"2018-02-01": "N/A",
"2018-02-02": "N/A",
"2018-02-03": "N/A"
}
]
// EXTRACT VALUE FOR HTML HEADER.
// ('createdBy', 'UserName', '2018-02-01', '2018-02-02' and 2018-02-03)
var col = [];
for (var i = 0; i < tableData.length; i++) {
for (var key in tableData[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableData.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = tableData[i][col[j]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
</script>
</html>
以上是关于如何在没有键的情况下在jquery中绑定json数据的主要内容，如果未能解决你的问题，请参考以下文章
如何在没有任何附加模块的情况下在迷你 Web 服务器中返回 json？
Ajax 将带有两个数组的 JSON 对象发送到一个 servlet 并在没有 jQuery 的情况下在 java servlet 中解析
如何在没有插件的情况下在 Jquery 中格式化数字？ [复制]
如何在没有jQuery的情况下在javascript中执行php文件