使用 JSON 数据填充 HTML table
Populate HTML table with JSON data
我们将不胜感激,[我们很早就开始编码]并且已经查看了很多示例,但无法将我们的 JSON 导入 table。
那一刻我们有 table 数据 in-line 但是格式正确的 JSON 文件现在可用并自动更新,我们想将它加载到 table 在页面加载时即时。
这是当前使用的示例:
<div>
<p> *** OTHER STUFF HERE ***<p/>
<table id="gable">
<colgroup>
<col class="twenty" />
<col class="fourty" />
<col class="thirtyfive" />
<col class="twentyfive" />
</colgroup>
<tr>
<th onclick="sortTable(0)"><span class="glyphicon glyphicon-sort"></span>  COUNTRY</th>
<th onclick="sortTable(1)"><span class="glyphicon glyphicon-sort"></span>  LOCATION</th>
<th onclick="sortTable(2)"><span class="glyphicon glyphicon-sort"></span>  BALANCE</th>
<th onclick="sortTable(3)"><span class="glyphicon glyphicon-sort"></span>  DATE</th>
</tr>
</table>
</div>
<script>
var data = [
{ "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },
{ "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":"18/05/2018" },
{ "COUNTRY":"PL", "LoC":"Kraków", "BALANCE":"12,362", "DATE":"22/06/2018" },
{ "COUNTRY":"AU", "LoC":"Townsville", "BALANCE":"7,569", "DATE":"1/07/2018" },
{ "COUNTRY":" ", "LoC":"BALANCE:", "BALANCE":"142,072", "DATE":" " }
];
var table = document.getElementById('gable');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + object.COUNTRY + '</td>' +
'<td>' + object.LoC + '</td>' +
'<td>' + object.BALANCE + '</td>' +
'<td>' + object.DATE + '</td>';
table.appendChild(tr);
});
</script>
有更多行数据,table 具有 CSS 样式并将 sortTable(n) 函数应用于 Headers。它显示完美,外观和功能符合我们的要求,
我们用 Google 搜索了 [很多] 并尝试了各种加载/填充脚本,并试图让 w3schools 上的示例正常工作 - https://www.w3schools.com/js/js_json_html.asp - 唉,我们对此还很陌生。
我们的JSON文件/assets/sample.JSON格式正确,符合要求。
我们如何简单导入 JSON 来填充 table id="gable"?
好的,所以在此解决方案中,我将假设您的外部 json 文件名为 'example.json'
您的外部文件应如下所示
example.json:
[
{ "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },
{ "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":"18/05/2018" },
{ "COUNTRY":"PL", "LoC":"Kraków", "BALANCE":"12,362", "DATE":"22/06/2018" },
{ "COUNTRY":"AU", "LoC":"Townsville", "BALANCE":"7,569", "DATE":"1/07/2018" },
{ "COUNTRY":" ", "LoC":"BALANCE:", "BALANCE":"142,072", "DATE":" " }
]
html 保持不变,所有更改都已在脚本标签中进行。我将功能拆分为 2 个新功能。第一个函数 (get_json_data) 从外部 json 文件获取 json 数据。第二个函数 (append_json) 将数据附加到 table.
我在整个代码中添加了注释,以解释每件事都在做什么。如果您有任何疑问或不清楚的地方,请告诉我。
这里是 html 文件的代码:
<div>
<p> *** OTHER STUFF HERE ***<p/>
<table id="gable">
<colgroup>
<col class="twenty" />
<col class="fourty" />
<col class="thirtyfive" />
<col class="twentyfive" />
</colgroup>
<tr>
<th onclick="sortTable(0)"><span class="glyphicon glyphicon-sort"></span>  COUNTRY</th>
<th onclick="sortTable(1)"><span class="glyphicon glyphicon-sort"></span>  LOCATION</th>
<th onclick="sortTable(2)"><span class="glyphicon glyphicon-sort"></span>  BALANCE</th>
<th onclick="sortTable(3)"><span class="glyphicon glyphicon-sort"></span>  DATE</th>
</tr>
</table>
</div>
<script>
//first add an event listener for page load
document.addEventListener( "DOMContentLoaded", get_json_data, false ); // get_json_data is the function name that will fire on page load
//this function is in the event listener and will execute on page load
function get_json_data(){
// Relative URL of external json file
var json_url = 'example.json';
//Build the XMLHttpRequest (aka AJAX Request)
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {//when a good response is given do this
var data = JSON.parse(this.responseText); // convert the response to a json object
append_json(data);// pass the json object to the append_json function
}
}
//set the request destination and type
xmlhttp.open("POST", json_url, true);
//set required headers for the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// send the request
xmlhttp.send(); // when the request completes it will execute the code in onreadystatechange section
}
//this function appends the json data to the table 'gable'
function append_json(data){
var table = document.getElementById('gable');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + object.COUNTRY + '</td>' +
'<td>' + object.LoC + '</td>' +
'<td>' + object.BALANCE + '</td>' +
'<td>' + object.DATE + '</td>';
table.appendChild(tr);
});
}
</script>
您可以创建一个独立于您的数据字段的 table 函数:
function updateTable(tableId, jsonData){
var tableHTML = "<tr>";
for (var headers in jsonData[0]) {
tableHTML += "<th>" + headers + "</th>";
}
tableHTML += "</tr>";
for (var eachItem in jsonData) {
tableHTML += "<tr>";
var dataObj = jsonData[eachItem];
for (var eachValue in dataObj){
tableHTML += "<td>" + dataObj[eachValue] + "</td>";
}
tableHTML += "</tr>";
}
document.getElementById(tableId).innerHTML = tableHTML;
}
我们将不胜感激,[我们很早就开始编码]并且已经查看了很多示例,但无法将我们的 JSON 导入 table。
那一刻我们有 table 数据 in-line 但是格式正确的 JSON 文件现在可用并自动更新,我们想将它加载到 table 在页面加载时即时。
这是当前使用的示例:
<div>
<p> *** OTHER STUFF HERE ***<p/>
<table id="gable">
<colgroup>
<col class="twenty" />
<col class="fourty" />
<col class="thirtyfive" />
<col class="twentyfive" />
</colgroup>
<tr>
<th onclick="sortTable(0)"><span class="glyphicon glyphicon-sort"></span>  COUNTRY</th>
<th onclick="sortTable(1)"><span class="glyphicon glyphicon-sort"></span>  LOCATION</th>
<th onclick="sortTable(2)"><span class="glyphicon glyphicon-sort"></span>  BALANCE</th>
<th onclick="sortTable(3)"><span class="glyphicon glyphicon-sort"></span>  DATE</th>
</tr>
</table>
</div>
<script>
var data = [
{ "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },
{ "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":"18/05/2018" },
{ "COUNTRY":"PL", "LoC":"Kraków", "BALANCE":"12,362", "DATE":"22/06/2018" },
{ "COUNTRY":"AU", "LoC":"Townsville", "BALANCE":"7,569", "DATE":"1/07/2018" },
{ "COUNTRY":" ", "LoC":"BALANCE:", "BALANCE":"142,072", "DATE":" " }
];
var table = document.getElementById('gable');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + object.COUNTRY + '</td>' +
'<td>' + object.LoC + '</td>' +
'<td>' + object.BALANCE + '</td>' +
'<td>' + object.DATE + '</td>';
table.appendChild(tr);
});
</script>
有更多行数据,table 具有 CSS 样式并将 sortTable(n) 函数应用于 Headers。它显示完美,外观和功能符合我们的要求,
我们用 Google 搜索了 [很多] 并尝试了各种加载/填充脚本,并试图让 w3schools 上的示例正常工作 - https://www.w3schools.com/js/js_json_html.asp - 唉,我们对此还很陌生。
我们的JSON文件/assets/sample.JSON格式正确,符合要求。
我们如何简单导入 JSON 来填充 table id="gable"?
好的,所以在此解决方案中,我将假设您的外部 json 文件名为 'example.json'
您的外部文件应如下所示 example.json:
[
{ "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },
{ "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":"18/05/2018" },
{ "COUNTRY":"PL", "LoC":"Kraków", "BALANCE":"12,362", "DATE":"22/06/2018" },
{ "COUNTRY":"AU", "LoC":"Townsville", "BALANCE":"7,569", "DATE":"1/07/2018" },
{ "COUNTRY":" ", "LoC":"BALANCE:", "BALANCE":"142,072", "DATE":" " }
]
html 保持不变,所有更改都已在脚本标签中进行。我将功能拆分为 2 个新功能。第一个函数 (get_json_data) 从外部 json 文件获取 json 数据。第二个函数 (append_json) 将数据附加到 table.
我在整个代码中添加了注释,以解释每件事都在做什么。如果您有任何疑问或不清楚的地方,请告诉我。
这里是 html 文件的代码:
<div>
<p> *** OTHER STUFF HERE ***<p/>
<table id="gable">
<colgroup>
<col class="twenty" />
<col class="fourty" />
<col class="thirtyfive" />
<col class="twentyfive" />
</colgroup>
<tr>
<th onclick="sortTable(0)"><span class="glyphicon glyphicon-sort"></span>  COUNTRY</th>
<th onclick="sortTable(1)"><span class="glyphicon glyphicon-sort"></span>  LOCATION</th>
<th onclick="sortTable(2)"><span class="glyphicon glyphicon-sort"></span>  BALANCE</th>
<th onclick="sortTable(3)"><span class="glyphicon glyphicon-sort"></span>  DATE</th>
</tr>
</table>
</div>
<script>
//first add an event listener for page load
document.addEventListener( "DOMContentLoaded", get_json_data, false ); // get_json_data is the function name that will fire on page load
//this function is in the event listener and will execute on page load
function get_json_data(){
// Relative URL of external json file
var json_url = 'example.json';
//Build the XMLHttpRequest (aka AJAX Request)
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {//when a good response is given do this
var data = JSON.parse(this.responseText); // convert the response to a json object
append_json(data);// pass the json object to the append_json function
}
}
//set the request destination and type
xmlhttp.open("POST", json_url, true);
//set required headers for the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// send the request
xmlhttp.send(); // when the request completes it will execute the code in onreadystatechange section
}
//this function appends the json data to the table 'gable'
function append_json(data){
var table = document.getElementById('gable');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + object.COUNTRY + '</td>' +
'<td>' + object.LoC + '</td>' +
'<td>' + object.BALANCE + '</td>' +
'<td>' + object.DATE + '</td>';
table.appendChild(tr);
});
}
</script>
您可以创建一个独立于您的数据字段的 table 函数:
function updateTable(tableId, jsonData){
var tableHTML = "<tr>";
for (var headers in jsonData[0]) {
tableHTML += "<th>" + headers + "</th>";
}
tableHTML += "</tr>";
for (var eachItem in jsonData) {
tableHTML += "<tr>";
var dataObj = jsonData[eachItem];
for (var eachValue in dataObj){
tableHTML += "<td>" + dataObj[eachValue] + "</td>";
}
tableHTML += "</tr>";
}
document.getElementById(tableId).innerHTML = tableHTML;
}