用JSON数据填充HTML表 [英] Populate HTML table with JSON data
问题描述
我们将非常感谢您提供一些指导,[我们很早就开始编码],并查看了许多示例,但无法将JSON导入表中.
We would be grateful for some guidance, [we are early into coding] and have looked at lots of examples but can cannot get our JSON to import into the table.
那时,我们在线获取了表数据,但是现在可以使用格式正确的JSON文件,并且该文件会自动更新,并且我们希望在加载页面时将其立即加载到表中.
At that moment we have the table data in-line however a correctly formatted JSON file is now available and automatically updates and we want to load it into the table on the fly when the page is loaded.
这是当前使用的示例:
<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>
有更多的数据行,该表具有CSS样式,并将sortTable(n)函数应用于Headers.它显示完美,外观和功能如我们所愿,
There are a lot more lines of data, the table has CSS styling and applies the sortTable(n) function to the Headers. It displays perfectly, looks and functions like we want,
我们已经Google搜索了[很多],并尝试了各种加载/填充脚本,并尝试获取有关w3schools正常运行的示例-
We've Googled [lots] and tried various load / populate scripts and attempted to get the example on w3schools working - https://www.w3schools.com/js/js_json_html.asp - alas we're fairly new to this.
我们的JSON文件/assets/sample.JSON格式正确且符合要求.
Our JSON file /assets/sample.JSON is correctly formatted and meets the requirements.
我们如何简单地导入JSON以填充表id ="gable"?
How do we do a simple import of the JSON to populate the table id="gable"?
推荐答案
好,因此在此解决方案中,我将假设您的外部json文件称为'example.json'
Ok, so in this solution I am going to assume that your external json file is called 'example.json'
您的外部文件应如下所示 example.json:
Your external file should look something like this 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)将数据追加到表中.
The html remains the same all the changes have been made in the script tags. I split the functionality into 2 new functions. The first function (get_json_data) gets the json data from the external json file. The second function (append_json) appends the data to the table.
我在整个代码中添加了注释,以解释一切.如果您有任何疑问或不清楚的地方,请告诉我.
I have put comments throughout the code to explain what everything is doing. if you have any questions or if something is unclear let me know.
这是html文件的代码:
here is the code for the html file:
<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>
这篇关于用JSON数据填充HTML表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!