將本地JSON文件導入HTML表
[英]Import local JSON-file into HTML-table
問題描述
我有一個名為data.json的JSON文件：
[{
"Group-of-Signals name" : "DPI_0",
"Group-of-Signals description" : "",
"Signal name" : "EUVPulseCount",
"Signal data type" : "SDT_STRING",
"Signal unit of measurement" : "M",
"Signal description" : "",
"Signal ID" : "-1",
"Signal index" : "0",
"id" : 0
}, {
"Group-of-Signals name" : "DPI_0",
"Group-of-Signals description" : "",
"Signal name" : "EUVState",
"Signal data type" : "SDT_STRING",
"Signal unit of measurement" : "",
"Signal description" : "",
"Signal ID" : "-1",
"Signal index" : "1",
"id" : 1
}, {
"Group-of-Signals name" : "DPI_0",
"Group-of-Signals description" : "",
"Signal name" : "Loop_Name",
"Signal data type" : "SDT_STRING",
"Signal unit of measurement" : "",
"Signal description" : "",
"Signal ID" : "-1",
"Signal index" : "2",
"id" : 2
}, {
"Group-of-Signals name" : "DPI_0",
"Group-of-Signals description" : "",
"Signal name" : "Project_Info",
"Signal data type" : "SDT_STRING",
"Signal unit of measurement" : "",
"Signal description" : "",
"Signal ID" : "-1",
"Signal index" : "3",
"id" : 3
}
]
我得到了現在可以正常工作的這段HTMl代碼，但我想通過代碼添加標頭，而不是告訴腳本標頭是什么。 當這可行時，我可以縮短代碼，只使用for循環並遍歷標頭列表：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="test.css"></link>
</head>
<body>
<div class="table">
<script>
$.getJSON('./data.json', function (data){
html = ''
$.each(data, function(key, value){
html += "<div class=\"row\"></div>";
html += "<div class=\"cell\">" + value["Group-of-Signals name"] + "</div>";
html += "<div class=\"cell\">" + value["Group-of-Signals description"] + "</div>";
html += "<div class=\"cell\">" + value["Signal name"] + "</div>";
html += "<div class=\"cell\">" + value["Signal data type"] + "</div>";
html += "<div class=\"cell\">" + value["Signal unit of measurement"] + "</div>";
html += "<div class=\"cell\">" + value["Signal description"] + "</div>";
html += "<div class=\"cell\">" + value["Signal ID"] + "</div>";
html += "<div class=\"cell\">" + value["Signal index"] + "</div>";
});
html += "</div>";
$(".table").append(html);
});
</script>
</div>
</body>
</html>
更新：使用millerf代碼，我設法獲取了數據，但是現在我仍然必須聲明這樣的鍵：
var headers = ["name", "description", "name", "data type", "unit of measurement", "description", "id", "index", "ID"]
$.getJSON('./data.json', function (data){
html = ''
for (i=0; i<headers.length; i++) {
html += "<div class=\"cell\">" + headers[i] + "</div>";
}
4 個解決方案
解決方案1
0 2016-10-07 08:26:15
您可以這樣修改代碼：
$.getJSON('./data.json', function(data) {
html = ''
var headersPrinted = false;
var keys = [];
for(var i in data) {
if(headersPrinted == false) {
html += "<div class=\"header row\">";
for(var name in data[i]) {
html += "<div class=\"cell\">" + name + "</div>";
keys.push(name);
}
html += "</div>"
headersPrinted = true;
}
html += "<div class=\"row\"></div>";
for(var key in keys){
html += "<div class=\"cell\">" + data[i][keys[key]] + "</div>";
}
}
html += "</div>";
$(".table").append(html);
});
解決方案2
0 2016-10-07 08:26:39
var html = "";
var Myheader = ["Group-of-Signals name", "Group-of-Signals description", "Signal name", "Signal data type", "Signal unit of measurement",
"Signal description", "Signal ID", "Signal index"
];
$.each(data, function(key, value) {
html += "<div class=\"row\"></div>";
Myheader.forEach(function(key) {
html += "<div class=\"cell\">" + value[key] + "</div>";
})
});
解決方案3
0 2016-10-07 08:28:25
使用Object.keys()做這種事情很容易;）
var json = [{ "Group-of-Signals name" : "DPI_0", "Group-of-Signals description" : "", "Signal name" : "EUVPulseCount", "Signal data type" : "SDT_STRING", "Signal unit of measurement" : "M", "Signal description" : "", "Signal ID" : "-1", "Signal index" : "0", "id" : 0 }, { "Group-of-Signals name" : "DPI_0", "Group-of-Signals description" : "", "Signal name" : "EUVState", "Signal data type" : "SDT_STRING", "Signal unit of measurement" : "", "Signal description" : "", "Signal ID" : "-1", "Signal index" : "1", "id" : 1 }, { "Group-of-Signals name" : "DPI_0", "Group-of-Signals description" : "", "Signal name" : "Loop_Name", "Signal data type" : "SDT_STRING", "Signal unit of measurement" : "", "Signal description" : "", "Signal ID" : "-1", "Signal index" : "2", "id" : 2 }, { "Group-of-Signals name" : "DPI_0", "Group-of-Signals description" : "", "Signal name" : "Project_Info", "Signal data type" : "SDT_STRING", "Signal unit of measurement" : "", "Signal description" : "", "Signal ID" : "-1", "Signal index" : "3", "id" : 3 } ]; var html = ''; $.each(json, function(key, value){ if(key === 0) { html += "<div class=\\"row\\">"; $.each(Object.keys(value), function(k, v) { html += "<div class=\\"cell\\">" + v + "</div>"; }); html += "</div>"; } html += "<div class=\\"row\\">"; $.each(Object.keys(value), function(k, v) { html += "<div class=\\"cell\\">" + value[v] + "</div>"; }); html += "</div>"; }); console.log(html)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
解決方案4
0 已采納 2016-10-07 08:30:49
添加另一個$ .each，以便您可以訪問標頭：
html = ''
$.each(data, function(key, value){
html += "<div class=\"row\">";
$.each(value, function(header, value2){
html += "<div class=\"cell\">" + value2+ "</div>";
})
html += "</div>"
});
html += "</div>";
$(".table").append(html);
Googlechart“地圖”中的本地JSOn-File
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.