轉換從 URL 調用的 JSON 數據並將其顯示在 HTML 表中
[英]converting JSON data called from a URL and displaying it in a HTML table
問題描述
我目前有一個 HTML 文件，它調用一個從 mysql 中提取數據的 url，並將其以 json 格式顯示到一個非常簡單的 iframe 中。 理想情況下，我想讓它以 HTML 表格格式顯示，但是我發現從 url 轉換 json 有點棘手。 我打算使用 Javascript。 任何幫助家伙？ 請記住，我對 Javascript 還很陌生，所以請對任何代碼進行評論，在此先感謝您！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Header</h2>
<div id="HEAD1">
<iframe src="http://localhost:8080" width="1000"
height="1000"></iframe>
</div>
</body>
這就是 Json 輸出的樣子，非常大，哈哈
[{"address":"178795010","client_id":null,"expire":"2016-09-26 16:56:32","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-20009.ipam.bskyb","hwaddr":"0800272022E6","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795011","client_id":null,"expire":"2016-09-26 16:58:48","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-18992.ipam.bskyb","hwaddr":"0800270FB593","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795012","client_id":null,"expire":"2016-09-26 17:13:55","fqdn_fwd":"1","fqdn_rev":"1","hostname":"dhcp-client1.ipam.bskyb","hwaddr":"0800275EA5B9","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795013","client_id":null,"expire":"2016-09-26 16:56:17","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-10873.ipam.bskyb","hwaddr":"0800275FCA93","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795018","client_id":null,"expire":"2016-09-26 17:06:16","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-24830.ipam.bskyb","hwaddr":"080027707E62","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"3232250119","client_id":null,"expire":"2016-09-26 16:17:27","fqdn_fwd":"1","fqdn_rev":"1","hostname":"bobobobobobobobobob.ipam.bmarkskyb","hwaddr":"080027379A97","state":"0","subnet_id":"12","valid_lifetime":"100"},{"address":"3232250120","client_id":null,"expire":"2016-09-26 16:17:15","fqdn_fwd":"1","fqdn_rev":"1","hostname":"bobtheblob7.ipam.bmarkskyb","hwaddr":"080027063AD9","state":"0","subnet_id":"12","valid_lifetime":"100"},{"address":"3232250122","client_id":null,"expire":"2016-09-26 16:17:22","fqdn_fwd":"1","fqdn_rev":"1","hostname":"bobtheblob8.ipam.bmarkskyb","hwaddr":"800027A5E27A","state":"0","subnet_id":"12","valid_lifetime":"100"}]
2 個解決方案
解決方案1
0 2016-09-27 12:36:11
您可以使用tableMaker()函數執行以下操作。 它將獲取您的數據並將其轉換為表格 HTML。 數據數組中的每個對象代表一行，對象屬性是標題，對象值是表格單元格值。 如果您將第二個參數作為true傳遞，則會顯示標題。
var tableMaker = (o,h) => { var keys = o.length && Object.keys(o[0]), rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>" : "<" + t + ">" + c + "</" + t + ">"),"<tr>"), rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []); return rows.length ? "<table>" + rows + "</table>" : ""; }, tableData = [{"address":"178795010","client_id":null,"expire":"2016-09-26 16:56:32","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-20009.ipam.bskyb","hwaddr":"0800272022E6","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795011","client_id":null,"expire":"2016-09-26 16:58:48","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-18992.ipam.bskyb","hwaddr":"0800270FB593","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795012","client_id":null,"expire":"2016-09-26 17:13:55","fqdn_fwd":"1","fqdn_rev":"1","hostname":"dhcp-client1.ipam.bskyb","hwaddr":"0800275EA5B9","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795013","client_id":null,"expire":"2016-09-26 16:56:17","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-10873.ipam.bskyb","hwaddr":"0800275FCA93","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"178795018","client_id":null,"expire":"2016-09-26 17:06:16","fqdn_fwd":"1","fqdn_rev":"1","hostname":"vagrant-24830.ipam.bskyb","hwaddr":"080027707E62","state":"0","subnet_id":"500","valid_lifetime":"4000"},{"address":"3232250119","client_id":null,"expire":"2016-09-26 16:17:27","fqdn_fwd":"1","fqdn_rev":"1","hostname":"bobobobobobobobobob.ipam.bmarkskyb","hwaddr":"080027379A97","state":"0","subnet_id":"12","valid_lifetime":"100"},{"address":"3232250120","client_id":null,"expire":"2016-09-26 16:17:15","fqdn_fwd":"1","fqdn_rev":"1","hostname":"bobtheblob7.ipam.bmarkskyb","hwaddr":"080027063AD9","state":"0","subnet_id":"12","valid_lifetime":"100"},{"address":"3232250122","client_id":null,"expire":"2016-09-26 16:17:22","fqdn_fwd":"1","fqdn_rev":"1","hostname":"bobtheblob8.ipam.bmarkskyb","hwaddr":"800027A5E27A","state":"0","subnet_id":"12","valid_lifetime":"100"}], tableHTML = tableMaker(tableData,true); myTable.innerHTML = tableHTML;
<div id="myTable"></div>
tableMaker()函數使用 ES6 代碼，因此如果您的目標瀏覽器不支持 ES6，則可能需要將其轉換為較舊的 ES5 版本。
解決方案2
-1 已采納 2016-09-28 09:18:19
這正是您正在尋找的 IMO。檢查<tr ng-repeat="row in data">正在制作的技巧，唯一的問題是您需要在 json 中用 '' 符號替換 ""
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="data = [{'address':'178795010','client_id':null,'expire':'2016-09-26 16:56:32','fqdn_fwd':'1','fqdn_rev':'1','hostname':'vagrant-20009.ipam.bskyb','hwaddr':'0800272022E6','state':'0','subnet_id':'500','valid_lifetime':'4000'}, {'address':'178795011','client_id':null,'expire':'2016-09-26 16:58:48','fqdn_fwd':'1','fqdn_rev':'1','hostname':'vagrant-18992.ipam.bskyb','hwaddr':'0800270FB593','state':'0','subnet_id':'500','valid_lifetime':'4000'}, {'address':'178795012','client_id':null,'expire':'2016-09-26 17:13:55','fqdn_fwd':'1','fqdn_rev':'1','hostname':'dhcp-client1.ipam.bskyb','hwaddr':'0800275EA5B9','state':'0','subnet_id':'500','valid_lifetime':'4000'}, {'address':'178795013','client_id':null,'expire':'2016-09-26 16:56:17','fqdn_fwd':'1','fqdn_rev':'1','hostname':'vagrant-10873.ipam.bskyb','hwaddr':'0800275FCA93','state':'0','subnet_id':'500','valid_lifetime':'4000'}, {'address':'178795018','client_id':null,'expire':'2016-09-26 17:06:16','fqdn_fwd':'1','fqdn_rev':'1','hostname':'vagrant-24830.ipam.bskyb','hwaddr':'080027707E62','state':'0','subnet_id':'500','valid_lifetime':'4000'}, {'address':'3232250119','client_id':null,'expire':'2016-09-26 16:17:27','fqdn_fwd':'1','fqdn_rev':'1','hostname':'bobobobobobobobobob.ipam.bmarkskyb','hwaddr':'080027379A97','state':'0','subnet_id':'12','valid_lifetime':'100'}, {'address':'3232250120','client_id':null,'expire':'2016-09-26 16:17:15','fqdn_fwd':'1','fqdn_rev':'1','hostname':'bobtheblob7.ipam.bmarkskyb','hwaddr':'080027063AD9','state':'0','subnet_id':'12','valid_lifetime':'100'}, {'address':'3232250122','client_id':null,'expire':'2016-09-26 16:17:22','fqdn_fwd':'1','fqdn_rev':'1','hostname':'bobtheblob8.ipam.bmarkskyb', 'hwaddr':'800027A5E27A','state':'0','subnet_id':'12','valid_lifetime':'100'}]"> <p>Data Table :</p> <table border="1"> <thead> <th>address</th> <th>client_id</th> <th>expire</th> <th>fqdn_fwd</th> <th>fqdn_rev</th> <th>hostname</th> <th>hwaddr</th> <th>state</th> <th>subnet_id</th> <th>valid_lifetime</th> </thead> <tr ng-repeat="row in data"> <td>{{row.address}}</td> <td>{{row.client_id}}</td> <td>{{row.expire}}</td> <td>{{row.fqdn_fwd}}</td> <td>{{row.fqdn_rev}}</td> <td>{{row.hostname}}</td> <td>{{row.hwaddr}}</td> <td>{{row.state}}</td> <td>{{row.subnet_id}}</td> <td>{{row.valid_lifetime}}</td> </tr> </table> </div> </body> </html>
具有來自 JSON url 的動態加載數據的 HTML 表的交互式過濾器
[英]Interactive filter for HTML table with dynamically loaded data from JSON url
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.