JSon HTML Table
JSon HTML Table
我有一组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。仅协议方案支持跨源请求:http,data,chrome,chrome-extension,https,chrome-extension-resource.send @ jquery.min.js:4
如何解决此问题以及如何以 HTML 表格格式显示 JSON 数据。
您需要从 Web 服务器为您的网站提供服务,而不是直接从文件系统提供服务。
安装像 apache 这样的 Web 服务器,假设data.json
来自与 JavaScript 文件相同的位置,您的示例应该可以工作。
有关跨源策略的详细信息。
一个非常常见的问题,请参阅以下内容: http://ahmed.amayem.com/solution-to-chrome-cross-origin-requests-are-only-supported-for-protocol-schemes-http-data-chrome-chrome-extension-https-chrome-extension-resource/
更简单:您不允许从单独的域中提取数据,或者例如,如果您在本地执行此操作file:///C:/Users/snehareddy/Desktop/Moni/data.json
请尝试安装 XAMP 或 Web 服务器以实现它。
相关文章:
- AppendChild Form / Table [Javascript/Html/PHP]
- Table HTML overflow
- CSV to html table
- Traversing through a html table
- Html dynamic table
- JSon HTML Table
- 使用 java 脚本导出 html table excel.找到“#”时不导出
- PHP and html table, using tablesorter javascript
- Dynamic table HTML Javascript
- html css hierarchical table
- javascript Highcharts JSON data to HTML table
- Ruby on Rails/HTML table
- Empty HTML Table
- ArrayList to update HTML Table
- HTML,CSS:Table dons'我不会相应地调整页面大小
- Append html table
- Html Search Table
- acts_as_votable javascript html table
- ng-repeat issue and html table
- HTML Table to Excel Javascript