转换从 URL 调用的 JSON 数据并将其显示在 HTML 表中答案

【问题标题】：converting JSON data called from a URL and displaying it in a HTML table转换从 URL 调用的 JSON 数据并将其显示在 HTML 表中
【发布时间】：2017-02-05 01:46:50
【问题描述】：

我目前有一个 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"}]

【问题讨论】：

您应该使用 angularjs 功能来实现相同的目标。
@ChaitanyaKurdukar 你可以给我看一个例子来说明如何实现吗？

标签： javascript html mysql json

【解决方案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>

【讨论】：

一个大约 50KB 的库，用于在表格中显示 JSON 这样简单的事情？
我同意这可以在没有 angularjs 的情况下通过使用普通的 javascript 来完成，但是 computerNoob 是 javascript 的新手，这对他来说很容易实现，它是每个人都在追求的新标准，另外IMO 这不是 computerNoob 唯一需要的东西，他也可以将 angularjs 功能用于他的应用程序的其他部分。

【解决方案2】：

您可以通过使用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;

&lt;div id="myTable"&gt;&lt;/div&gt;

tableMaker() 函数使用 ES6 代码，因此如果您的目标浏览器不支持 ES6，则可能需要将其转换为旧版 ES5。

【讨论】：

如果我想直接从 url 调用它怎么办？因为那是我的目标。
@computerNoob 我猜你首先必须将接收到的 URI 转换为 decodeURIComponent() 的 JSON 字符串，然后转换为 JSON.parse() 的 JS 对象。如tableData = JSON.parse(decodeURIComponent(url))