我有一组 JSON 数据，我想将其显示在 HTML 表格中。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div style="margin: 20px auto; width: 500px;">
<table border="1" cellpadding="5" id="jsonTable" style="border-collapse: collapse;">
</table>
</div>
<script type="text/javascript">
function addAllColumnHeaders(myList) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#jsonTable").append(headerTr$);
return columnSet;
}
$.getJSON("data.json", function (data) {
var columns = addAllColumnHeaders(data);
for (var i = 0; i < data.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = data[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#jsonTable").append(row$);
}
});
</script>
</body>
</html>
JSON
{
"WebReport_BillingResp": {
"summaryTables": [
{
"-title": "Capacity License Usage",
"tableHeaders": {
"cellValue": [
{ "-val": "Billing Group" },
{ "-val": "Description" },
{ "-val": "Baseline" },
{ "-val": "Total Usage (TB)" },
{ "-val": "Total Cost" }
]
},
"tableData": [
{
"cellValue": [
{ "-val": "SSP-C-DPS-1T" },
{ "-val": "Simpana® Data Protection Snapshot Management Serv" },
{ "-val": "0" },
{ "-val": "38" },
{ "-val": "3078" }
]
},
{
"cellValue": [
{ "-val": "Total" },
{
},
{
},
{ "-val": "38" },
{ "-val": "3078" }
]
}
]
},
{
"-title": "Client Access License Usage",
"tableHeaders": {
"cellValue": [
{ "-val": "Billing Group" },
{ "-val": "Description" },
{ "-val": "Baseline" },
{ "-val": "Total Usage" },
{ "-val": "Total Cost" }
]
},
"tableData": [
{
"cellValue": [
{ "-val": "Data-aware Client Protection" },
{ "-val": "Data-aware Client Protection" },
{ "-val": "0" },
{ "-val": "343" },
{ "-val": "8232" }
]
},
{
"cellValue": [
{ "-val": "SSP-cSIM-V-A-Client" },
{ "-val": "cSIM Simpana® for VM Protection and Cloud Manageme" },
{ "-val": "0" },
{ "-val": "847" },
{ "-val": "5929" }
]
},
{
"cellValue": [
{ "-val": "SSP-eSIM-B-A" },
{ "-val": "eSIM Simpana® Endpoint Backup/Restore option meter" },
{ "-val": "0" },
{ "-val": "83" },
{ "-val": "145.25" }
]
},
{
"cellValue": [
{ "-val": "Total" },
{
},
{
},
{ "-val": "1273" },
{ "-val": "14306.25" }
]
}
]
}
],
"header": {
"-amountDue": "17384.25",
"-minimumFee": "0",
"-custNameValue": "Hipskind test",
"-dueDate": "3/11/2016",
"-billDate": "2/11/2016",
"-billCycle": "1/1/2016 - 1/31/2016",
"-custNameLabel": "CommCell Group",
"-totalCost": "17384.25"
},
"detailTables": [
{
"-title": "Capacity License Usage at CommCell level",
"tableHeaders": {
"cellValue": [
{ "-val": "CommCell ID" },
{ "-val": "CommCell Name" },
{ "-val": "Billing Group" },
{ "-val": "Usage (TB)" }
]
},
"tableData": {
"cellValue": [
{ "-val": "FBED4" },
{ "-val": "Hipskind TSG Inc - hsob-commserve" },
{ "-val": "SSP-C-DPS-1T" },
{ "-val": "38" }
]
}
},
{
"-title": "Client Access License Usage at CommCell level",
"tableHeaders": {
"cellValue": [
{ "-val": "CommCell ID" },
{ "-val": "CommCell Name" },
{ "-val": "Billing Group" },
{ "-val": "Usage" }
]
},
"tableData": [
{
"cellValue": [
{ "-val": "FBED4" },
{ "-val": "Hipskind TSG Inc - hsob-commserve" },
{ "-val": "SSP-cSIM-V-A-Client" },
{ "-val": "654" }
]
},
{
"cellValue": [
{
},
{
},
{ "-val": "SSP-eSIM-B-A" },
{ "-val": "20" }
]
},
{
"cellValue": [
{
},
{
},
{ "-val": "Data-aware Client Protection" },
{ "-val": "242" }
]
},
{
"cellValue": [
{ "-val": "FC6A2" },
{ "-val": "Hipskind TSG - m1wcomcon01-p" },
{ "-val": "SSP-cSIM-V-A-Client" },
{ "-val": "193" }
]
},
{
"cellValue": [
{
},
{
},
{ "-val": "SSP-eSIM-B-A" },
{ "-val": "63" }
]
},
{
"cellValue": [
{
},
{
},
{ "-val": "Data-aware Client Protection" },
{ "-val": "101" }
]
}
]
},
{
"-title": "Capacity License Usage at Billing Group level",
"tableHeaders": {
"cellValue": [
{ "-val": "Billing Group" },
{ "-val": "Lower Limit" },
{ "-val": "Upper Limit" },
{ "-val": "Price per Tier" },
{ "-val": "Usage per Tier" },
{ "-val": "Cost per Tier" }
]
},
"tableData": [
{
"cellValue": [
{ "-val": "SSP-C-DPS-1T" },
{ "-val": "0" },
{ "-val": "-1" },
{ "-val": "81" },
{ "-val": "38" },
{ "-val": "3078" }
]
},
{
"cellValue": [
{ "-val": "Sub Total" },
{
},
{
},
{
},
{ "-val": "38" },
{ "-val": "3078" }
]
}
]
},
{
"-title": "Client Access License Usage at Billing Group level",
"tableHeaders": {
"cellValue": [
{ "-val": "Billing Group" },
{ "-val": "Lower Limit" },
{ "-val": "Upper Limit" },
{ "-val": "Price per Tier" },
{ "-val": "Usage per Tier" },
{ "-val": "Cost per Tier" }
]
},
"tableData": [
{
"cellValue": [
{ "-val": "SSP-cSIM-V-A-Client" },
{ "-val": "0" },
{ "-val": "-1" },
{ "-val": "7" },
{ "-val": "847" },
{ "-val": "5929" }
]
},
{
"cellValue": [
{ "-val": "Sub Total" },
{
},
{
},
{
},
{ "-val": "847" },
{ "-val": "5929" }
]
},
{
"cellValue": [
{ "-val": "SSP-eSIM-B-A" },
{ "-val": "0" },
{ "-val": "-1" },
{ "-val": "1.75" },
{ "-val": "83" },
{ "-val": "145.25" }
]
},
{
"cellValue": [
{ "-val": "Sub Total" },
{
},
{
},
{
},
{ "-val": "83" },
{ "-val": "145.25" }
]
},
{
"cellValue": [
{ "-val": "Data-aware Client Protection" },
{ "-val": "0" },
{ "-val": "-1" },
{ "-val": "24" },
{ "-val": "343" },
{ "-val": "8232" }
]
},
{
"cellValue": [
{ "-val": "Sub Total" },
{
},
{
},
{
},
{ "-val": "343" },
{ "-val": "8232" }
]
}
]
},
{
"-title": "Exception List",
"tableHeaders": {
"cellValue": [
{ "-val": "csid" },
{ "-val": "lictype" },
{ "-val": "name" },
{ "-val": "capacityUsage" },
{ "-val": "licenseUsage" }
]
},
"tableData": [
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "102" },
{ "-val": "1-Touch Server for Unix" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "110" },
{ "-val": "1-Touch Server for Windows" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "100013" },
{ "-val": "Archived Mailboxes" },
{ "-val": "0" },
{ "-val": "206" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "139" },
{ "-val": "Auxiliary Copy Encryption" },
{ "-val": "0" },
{ "-val": "4" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "190" },
{ "-val": "Cloud Storage" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "141" },
{ "-val": "Compliance Search" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "105" },
{ "-val": "Content Addressed Storage" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "100018" },
{ "-val": "CPU Sockets on Hypervisor Hosts" },
{ "-val": "0" },
{ "-val": "160" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "100004" },
{ "-val": "Data Archive Enterprise infrastructure" },
{ "-val": "4017161764864" },
{ "-val": "0" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "85" },
{ "-val": "Data Encryption" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "100002" },
{ "-val": "Data Protection Enterprise infrastructure" },
{ "-val": "158486117744640" },
{ "-val": "0" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "168" },
{ "-val": "De-Duplication Block Level" },
{ "-val": "0" },
{ "-val": "24" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "100016" },
{ "-val": "Dedupe Store Space (TB)" },
{ "-val": "472158879875072" },
{ "-val": "0" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "174" },
{ "-val": "Developer License" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "84" },
{ "-val": "Disk Library Connector (DDO)" },
{ "-val": "0" },
{ "-val": "28" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "100015" },
{ "-val": "Disk Library Space (TB)" },
{ "-val": "653714035572736" },
{ "-val": "0" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "100025" },
{ "-val": "End point sharing users" },
{ "-val": "0" },
{ "-val": "6" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "111" },
{ "-val": "Erase Data" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "63" },
{ "-val": "File System Archiving" },
{ "-val": "0" },
{ "-val": "6" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "91" },
{ "-val": "GridStore" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "163" },
{ "-val": "Hardware Snapshot Enabler" },
{ "-val": "0" },
{ "-val": "4" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "142" },
{ "-val": "Legal Hold" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "11" },
{ "-val": "MediaAgent" },
{ "-val": "0" },
{ "-val": "30" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "0" },
{ "-val": "N/A" },
{ "-val": "188977207120421" },
{ "-val": "0" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "203" },
{ "-val": "Protected Mailboxes" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "82" },
{ "-val": "VaultTracker Enterprise" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "143" },
{ "-val": "Virtual Server" },
{ "-val": "106550574964102" },
{ "-val": "34" }
]
},
{
"cellValue": [
{ "-val": "39637" },
{ "-val": "90" },
{ "-val": "WORM Media Support" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "102" },
{ "-val": "1-Touch Server for Unix" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "110" },
{ "-val": "1-Touch Server for Windows" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "141" },
{ "-val": "Compliance Search" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "105" },
{ "-val": "Content Addressed Storage" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "100018" },
{ "-val": "CPU Sockets on Hypervisor Hosts" },
{ "-val": "0" },
{ "-val": "23" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "85" },
{ "-val": "Data Encryption" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "100002" },
{ "-val": "Data Protection Enterprise infrastructure" },
{ "-val": "38327672635392" },
{ "-val": "0" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "168" },
{ "-val": "De-Duplication Block Level" },
{ "-val": "0" },
{ "-val": "6" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "100016" },
{ "-val": "Dedupe Store Space (TB)" },
{ "-val": "149842665930752" },
{ "-val": "0" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "174" },
{ "-val": "Developer License" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "84" },
{ "-val": "Disk Library Connector (DDO)" },
{ "-val": "0" },
{ "-val": "7" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "100015" },
{ "-val": "Disk Library Space (TB)" },
{ "-val": "149961393045504" },
{ "-val": "0" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "111" },
{ "-val": "Erase Data" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "91" },
{ "-val": "GridStore" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "142" },
{ "-val": "Legal Hold" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "11" },
{ "-val": "MediaAgent" },
{ "-val": "0" },
{ "-val": "8" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "0" },
{ "-val": "N/A" },
{ "-val": "25017104048128" },
{ "-val": "0" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "203" },
{ "-val": "Protected Mailboxes" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "82" },
{ "-val": "VaultTracker Enterprise" },
{ "-val": "0" },
{ "-val": "1" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "143" },
{ "-val": "Virtual Server" },
{ "-val": "0" },
{ "-val": "6" }
]
},
{
"cellValue": [
{ "-val": "43621" },
{ "-val": "90" },
{ "-val": "WORM Media Support" },
{ "-val": "0" },
{ "-val": "1" }
]
}
]
}
]
}
}
当我尝试加载时，控制台中显示错误
XMLHttpRequest 无法加载 file:///C:/Users/snehareddy/Desktop/Moni/data.json。仅以下协议(protocol)方案支持跨源请求:http、data、chrome、chrome-extension、https、chrome-extension-resource.send @ jquery.min.js:4
如何解决这个问题以及如何以 HTML 表格格式显示 JSON 数据。
最佳答案
您需要从网络服务器提供网站服务，而不是直接通过文件系统。
安装像apache这样的网络服务器假设 data.json 与 JavaScript 文件来自同一位置，您的示例应该可以正常工作。
有关cross origin policy的更多信息.
关于javascript - JSon HTML 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35493286/