从复杂的JSON生成HTML表
Generate HTML table from intricate JSON
我有一些JSON数据希望生成一个漂亮的HTML表,用于查看某人在测试中的性能统计数据。在我的JSON数据中,我按名字对每个学生进行了分组,并将他们的分数放在JSON数组中。
使用像{ "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" }
这样更简单的JSON会容易得多,因为我可以为每个JSON对象生成一个<td>
。
需要明确的是:我需要一种方法来将对象放在每个<tr>
中的嵌套数组中。
我的PHP生成的JSON如下所示:
[
{
"school":"St. Paul"
},
{
"class":"4a"
},
{
"student":"Andreas",
"taskid":[
2,
1
],
"level":[
3,
4
],
"hint":[
1,
0
],
"correctanswer":[
1,
1
],
"timeused":[
30,
20
]
}
]
有什么简单的方法可以做成这样的桌子吗?我对任何相对简单的图书馆都持开放态度。
学生x
____________________________________________
|#taskid|level|hint|correctanswer|time used|
|‾‾‾‾‾‾‾|‾‾‾‾‾|‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾|
|‾‾‾‾‾‾‾|‾‾‾‾‾|‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾|
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
我有一个答案给你,下面是它的测试运行,花了我4个小时,只使用了JavsScript,没有像jquery这样的第三方库。你可以进一步即兴发挥。享受
var jsonData = [{
"school": "St. Paul"
}, {
"class": "4a"
}, {
"student": "Natalie",
"taskid": [
3,
4
],
"level": [
1,
2
],
"hint": [
1,
6
],
"correctanswer": [
1,
4
],
"timeused": [
30,
10
]
}, {
"school": "St. Paul"
}, {
"class": "4a"
}, {
"student": "Andreas",
"taskid": [
2,
1
],
"level": [
3,
4
],
"hint": [
1,
0
],
"correctanswer": [
1,
1
],
"timeused": [
30,
20
]
}]
for (var i = 0; i < jsonData.length; i++) {
var nodeTable = document.createElement("table");
var nodeTbody = document.createElement("tbody");
for (var x = 0; x < Object.keys(jsonData[i]).length; x++) {
var headerText = document.createTextNode(Object.keys(jsonData[i])[x]);
var nodeTH = document.createElement("th");
nodeTH.appendChild(headerText);
document.getElementById("schoolRecord").appendChild(nodeTable).appendChild(nodeTbody).appendChild(nodeTH);
}
var maxLength = [];
for (var x = 0; x < Object.keys(jsonData[i]).length; x++) {
for (var z = 0; z < jsonData[i][Object.keys(jsonData[i])[x]].length; z++) {
if (typeof(jsonData[i][Object.keys(jsonData[i])[x]]) !== 'string') {
maxLength.push(jsonData[i][Object.keys(jsonData[i])[x]].length);
}
}
}
if (maxLength.length > 0) {
maxLength = Math.max.apply(Math, maxLength);
}
if (maxLength.length === undefined) {
for (var z = 0; z < maxLength; z++) {
var nodeTR = document.createElement("tr");
nodeTbody.appendChild(nodeTR);
createTD(z);
}
} else {
var nodeTR = document.createElement("tr");
nodeTbody.appendChild(nodeTR);
createTD();
}
function createTD(nodeValue) {
for (var x = 0; x < Object.keys(jsonData[i]).length; x++) {
if (typeof(jsonData[i][Object.keys(jsonData[i])[x]]) === 'string') {
var tdText = document.createTextNode(jsonData[i][Object.keys(jsonData[i])[x]]);
var nodeTD = document.createElement("td");
nodeTD.appendChild(tdText);
nodeTR.appendChild(nodeTD);
} else {
var tdText = document.createTextNode(jsonData[i][Object.keys(jsonData[i])[x]][nodeValue]);
var nodeTD = document.createElement("td");
nodeTD.appendChild(tdText);
nodeTR.appendChild(nodeTD);
}
}
}
}
table th,
table td {
border: 1px solid black;
border-collapse: collapse;
}
<div id="schoolRecord">
</div>
相关文章:
- 使用Javascript生成包含JSP的HTML
- 生成pdf或其他非html文件时的错误处理
- 使用jQuery根据动态生成的html动态添加html
- JavaScript生成html格式的密码
- 如何在HTML生成的pdf中添加页眉
- 如何从html生成ajax调用
- 使用 JavaScript 或 HTML 生成批处理(.bat)文件
- JavaScript 库,用于从 HTML 生成 PDF(兼容 Phonegap)
- 将javascript添加到html生成的BY javascript中
- 使用javascript和html生成pdf报告
- 使用Angularjs中的pdfMake从HTML生成PDF
- Html生成的JavaScript无法与其他JavaScript一起使用
- 在PHP和Javascript之间分解HTML生成代码
- 选择创建DOM元素还是在javascript中使用HTML生成控件
- 从Confluence XML或HTML生成可搜索的可移植静态HTML站点
- 在事件触发时通过生成的HTML生成JQuery引用
- Soundcloud自定义播放器HTML生成/堆叠顺序
- 如何使用wkhtmltopdf获取html生成的pdf中的页码
- 通过jquery.html()生成的锚标记(href链接)只在第二次点击时被点击
- Rails 4模型路径删除不工作,尽管正确的HTML生成