我创建了一个简单的函数来从 json 对象返回一个表。我确信我的代码可以改进，这样第一行就不需要为空，并且想知道是否有人可以帮助解决这个问题。
我的函数不需要 jQuery，我更愿意使用 native JavaScript 来实现此实现。
<!DOCTYPE html>
<html>
<head>
<title>JSON Table</title>
<script>
function JSONtable(j,r){
// requirement: first record should be blank
var v = [];
var k = [];
var iv = [];
var ik = [];
var iiv = [];
var iik = [];
var t = '';
var f = 0;
var fi = 0;
for (k in j) {
if (k==r){
t = '<table name="'+k+'">';
v = j[k];
for (ik in j[k]) {
t = t+'<tr>';
for (iik in j[k][ik]) {
if (f==0){
t = t+'<th>'+iik+'</th>';
}else{
t = t+'<td>'+j[k][ik][iik]+'</td>';
}
fi++;
}
f++;
t = t+'</tr>';
}
t = t+'</table>';
}
}
return t;
}
</script>
</head>
<body>
<script>
var j = {"employees":[{"firstName":"-blank-", "lastName":"-blank-", "link":"-blank-"},{"firstName":"John", "lastName":"Doe", "link":"<a href=\"#\">Link</a>"},{"firstName":"Anna", "lastName":"Smith", "link":"<a href=\"#\">Link</a>"},{"firstName":"Peter", "lastName":"Jones", "link":"<a href=\"#\">Link</a>"}]};
document.write(JSONtable(j,'employees'));
</script>
</body>
</html>
结果
<table name="employees">
<tbody>
<tr>
<th>firstName</th>
<th>lastName</th>
<th>link</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="#">Link</a></td>
</tr>
<tr>
<td>Anna</td>
<td>Smith</td>
<td><a href="#">Link</a></td>
</tr>
<tr>
<td>Peter</td>
<td>Jones</td>
<td><a href="#">Link</a></td>
</tr>
</tbody>
</table>
不需要空白记录的新代码
<!DOCTYPE html>
<html>
<head>
<title>JSON Table</title>
<script>
function JSONtable(j,r){
var v = [];
var k = [];
var iv = [];
var ik = [];
var iiv = [];
var iik = [];
var t = '';
var f = 0;
for (k in j) {
if (k==r){
t = '<table name="'+k+'">';
t = t+'<tr>';
for (i of Object.keys(j[k][0])) {
t = t+'<th>'+i+'</th>';
}
t = t+'</tr>';
v = j[k];
for (ik in j[k]) {
t = t+'<tr>';
for (iik in j[k][ik]) {
t = t+'<td>'+j[k][ik][iik]+'</td>';
}
f++;
t = t+'</tr>';
}
t = t+'</table>';
}
}
return t;
}
</script>
</head>
<body>
<script>
var j = {"employees":[{"firstName":"John", "lastName":"Doe", "link":"<a href=\"#\">Link</a>"},{"firstName":"Anna", "lastName":"Smith", "link":"<a href=\"#\">Link</a>"},{"firstName":"Peter", "lastName":"Jones", "link":"<a href=\"#\">Link</a>"}]};
document.write(JSONtable(j,'employees'));
</script>
</body>
</html>
最佳答案
使用Object.keys获取数组键的名称并首先构建 header 。然后循环浏览列表的其余部分。
<title>JSON Table</title>
<script>
function JSONtable(j,r){
// requirement: first record should be blank
var v = [];
var k = Object.keys(j)[0];
var iv = [];
var ik = [];
var iiv = [];
var iik = [];
var t = '';
var f = 0;
var fi = 0;
if (k === r) {
t = '<table name="'+k+'">';
t = t+'<tr>';
for (i of Object.keys(j[k][0])) {
t = t+'<th>'+i+'</th>';
}
t = t+'</tr>';
for (k in j) {
v = j[k];
for (ik in j[k]) {
t = t+'<tr>';
for (iik in j[k][ik]) {
t = t+'<td>'+j[k][ik][iik]+'</td>';
fi++;
}
f++;
t = t+'</tr>';
}
}
t = t+'</table>';
}
return t;
}
</script>
<body>
<script>
var j = {"employees":[{"firstName":"John", "lastName":"Doe", "link":"<a href=\"#\">Link</a>"},{"firstName":"Anna", "lastName":"Smith", "link":"<a href=\"#\">Link</a>"},{"firstName":"Peter", "lastName":"Jones", "link":"<a href=\"#\">Link</a>"}]};
document.write(JSONtable(j,'employees'));
</script>
关于JSON 对象中的 Javascript 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35089952/