如何在html表中显示JSON数据
[英]How to display the JSON data in a html table
问题描述
Here I am fetching the JSON data from the API using an AJAX call. 
这里我使用AJAX调用从API获取JSON数据。 And I need to display the data in a html format. 我需要以html格式显示数据。 Can anyone tell me how to do to that? 谁能告诉我该怎么做？ My JSON data looks like this: 我的JSON数据如下所示：
"vjginteractive":{"signup_date_time":"2017-04-11 01:34:19","package_id":"2","total_leads":0},"vmlsingapore":{"signup_date_time":"2016-05-31 07:33:38","package_id":"2","total_leads":"not_available"},"vodkafashionindia":{"signup_date_time":"2016-03-17 18:15:48","package_id":"2","total_leads":0}
This what I have tried. 这就是我所尝试过的。 How to display the Company name, Visits and Leads in a table format? 如何以表格格式显示公司名称，访问和潜在客户？
$(document).ready(function() { var X = []; var Y = []; var data = []; function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("application/json"); xobj.open('GET', 'https://api.myjson.com/bins/nihnp', true); xobj.onreadystatechange = function() { if (xobj.readyState == 4 && xobj.status == "200") { callback(xobj.responseText); } } xobj.send(null); } loadJSON(function(response) { var response; var field=JSON.parse(response); var values=[]; for (var i = 0; i < field.length; i++) { var $this=field[i]; for (var key in $this) { if ($this.hasOwnProperty(key)) { var val = $this[key]; values.push({"x":val.total_visits,"y":val.total_leads}); } } } }); });
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="chartContainer" style="height: 560px; width: 100%;"></div> </head>
1 个解决方案
解决方案1
3 2017-10-23 05:48:01
You can get Object 's keys with Object.keys that will return you an Array with all the keys. 您可以使用Object.keys获取Object的键，它将返回一个包含所有键的Array 。 Then you can just use forEach to iterate over them. 然后你可以使用forEach迭代它们。
$(document).ready(function() { function loadJSON(callback) { const data = '{"vjginteractive":{"signup_date_time":"2017-04-11 01:34:19","package_id":"2","total_leads":0},"vmlsingapore":{"signup_date_time":"2016-05-31 07:33:38","package_id":"2","total_leads":"not_available"},"vodkafashionindia":{"signup_date_time":"2016-03-17 18:15:48","package_id":"2","total_leads":0}}'; callback(JSON.parse(data)); } loadJSON(function(response) { const $table = $('#chartContainer'); Object.keys(response) .forEach((key) => { const field = response[key]; $table.append( `<tr> <td>${field.signup_date_time}</td> <td>${field.package_id}</td> <td>${field.total_leads}</td> </tr>`); }); }); });
td { border: 1px solid rgba(0, 0, 0, .2); padding: 5px 10px; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="chartContainer"></table> </head>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.