我目前有一个HTML文件，它调用一个url，它是从mysql中提取数据，并在json中显示一个非常简单的iframe。理想情况下，我想让它以HTML表格格式显示，但是我发现从网址转换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输出的样子，它相当大的lol
[{"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"}]
答案 0 :(得分：0)
您可以使用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版本。
答案 1 :(得分：-1)
这就是你正在寻找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>