我创建了一个新类别作为主表列表表。问题是如何将此 JSON 数据插入到 JavaScript HTML 表中,格式如下:
{
query: {
count: 10,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
...
},
test1: {
count: 16,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
...
},
bold: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
...
},
home: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US",
diagnostics: {},
...
},
.....
}
表格如下:
| Name | Count | Time | Language | Diag |
-------------------------------------------------------------
| query | 10 | 2015-12-09T17:12:09Z | en-US | 2 |
| test1 | 16 | 2015-12-09T17:12:09Z | en-US | 2 | .....
最佳答案
这是一个简短的示例,可以帮助您理解原理,然后调整它以满足您的需求。
const source = {
query: {
count: 10,
created: "2015-12-09T17:12:09Z",
lang: "en-US"
},
test1: {
count: 16,
created: "2015-12-09T17:12:09Z",
lang: "en-US"
},
bold: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US"
},
home: {
count: 1,
created: "2015-12-09T17:12:09Z",
lang: "en-US"
}
}
const keys = Object.keys(source); // get the names properly
const colNames = Object.keys(source[keys[0]]); // get all column names
// Let's form table and header first
const table = document.createElement('table');
const header = document.createElement('tr');
header.innerHTML = `<th>name</th>`
header.innerHTML += colNames.map(name => `<th>${name}</th>`).join('');
table.appendChild(header);
// Now lets append all the rows
const rows = keys.map((key) => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${key}</td>`
tr.innerHTML += colNames.map(name => `<td>${source[key][name]}</td>`).join('');
return tr;
});
rows.forEach(r => table.appendChild(r));
// render
document.body.appendChild(table);
td, th {
width: 120px;
border: 1px solid black;
}
关于javascript - 获取 JSON 到 HTML JavaScript 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56380023/