Here I am fetching the JSON data from the API using an AJAX call. And I need to display the data in a html format. Can anyone tell me how to do to that? My JSON data looks like this:
这里我使用AJAX调用从API获取JSON数据。我需要以html格式显示数据。有人能告诉我怎么做吗?我的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
2
You can get Object's keys with Object.keys that will return you an Array with all the keys. 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>#1
2
You can get Object's keys with Object.keys that will return you an Array with all the keys. 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>