computerNoob computerNoob - 2 months ago 5
HTML Question

converting JSON data called from a URL and displaying it in a HTML table

I currently have a HTML file which calls a url that is pull data from mysql, and displaying it in json in to a very simple iframe. Ideally I would like to get it to display in a HTML table format, however I'm finding it a little tricky to convert json from a url. I plan to use Javascript. Any help guys? Please bare in mind I am pretty new to Javascript so please do comment any code, thank you in advance!

<!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>




This is what the Json output looks like, its pretty big 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"}]

Answer

This is the exact thing what you are looking for IMO.Check the <tr ng-repeat="row in data"> which is making the trick, only thing is you need to replace "" with '' notation in 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>

Comments