堆栈内存溢出
  简体   繁体   English

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

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

 原文  2016-09-27 12:17:48  5   2    javascript/ html/ mysql/ json

问题描述

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.我目前有一个 HTML 文件，它调用一个从 mysql 中提取数据的 url，并将其以 json 格式显示到一个非常简单的 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.理想情况下，我想让它以 HTML 表格格式显示，但是我发现从 url 转换 json 有点棘手。 I plan to use Javascript.我打算使用 Javascript。 Any help guys?任何帮助家伙？ Please bare in mind I am pretty new to Javascript so please do comment any code, thank you in advance!请记住，我对 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>

This is what the Json output looks like, its pretty big lol这就是 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

You might do as follows by utilizing a tableMaker() function.您可以使用tableMaker()函数执行以下操作。 It will take your data and will convert it into a table HTML.它将获取您的数据并将其转换为表格 HTML。 each object in your data array represents a row, object properties are the headers and object values are the table cell values.数据数组中的每个对象代表一行，对象属性是标题，对象值是表格单元格值。 If you pass the second argument as true , then the headers are displayed.如果您将第二个参数作为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() function uses ES6 code so might need to transpile it to older ES5 version if you target browsers those don't support ES6. tableMaker()函数使用 ES6 代码，因此如果您的目标浏览器不支持 ES6，则可能需要将其转换为较旧的 ES5 版本。

解决方案2
 -1 已采纳  2016-09-28 09:18:19

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这正是您正在寻找的 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无法从URL加载JSON数据并以HTML显示 - Having trouble loading JSON data from URL and displaying in HTML 从 API json 多个 url 中获取数据到 html 表中 - Get data from API json multiple url's into html table 具有来自 JSON url 的动态加载数据的 HTML 表的交互式过滤器 - Interactive filter for HTML table with dynamically loaded data from JSON url 从URL加载JSON数据以导入HTML表 - Loading JSON data from URL to import in HTML table 从HTML表格中的JSON url加载数据而无需重复 - Load data from JSON url in HTML table without duplications 从URL检索和显示JSON数据 - Retrieving and displaying JSON data from URL getJSON-显示JSON URL提要中的数据 - getJSON - displaying the data from JSON URL feed 将JSON转换为html表 - Converting JSON to a html table 将Html表转换为JSON - Converting Html Table to JSON 以 HTML 格式显示来自 API 的 JSON 数据 - Displaying JSON Data from API in HTML
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM