HTML vẫn giữ nguyên tất cả các thay đổi đã được thực hiện trong các thẻ tập lệnh. Tôi chia chức năng thành 2 chức năng mới. Hàm đầu tiên (GET_JSON_DATA) nhận dữ liệu JSON từ tệp JSON bên ngoài. Hàm thứ hai (append_json) nối dữ liệu vào bảng.
Tôi đã đặt ý kiến trong suốt mã để giải thích mọi thứ đang làm gì. Nếu bạn có bất kỳ câu hỏi hoặc nếu một cái gì đó không rõ ràng, hãy cho tôi biết.
Đây là mã cho tệp 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>
Ký hiệu đối tượng JSON hoặc JavaScript là một định dạng dữ liệu dễ hiểu đơn giản. JSON là nhẹ và ngôn ngữ độc lập. Ở đây, trong bài viết này, tôi sẽ chỉ cho bạn cách chuyển đổi dữ liệu JSON thành bảng HTML bằng JavaScript. Ngoài ra, bạn sẽ tìm hiểu làm thế nào bạn có thể tạo một bảng trong JavaScript một cách linh hoạt bằng phương thức createdEuity ().
Xem bản demo này
Lưu ý: Bạn cũng có thể sử dụng jQuery để chuyển đổi dữ liệu từ tệp JSON sang bảng HTML: You can also
use jQuery to convert data from a JSON file to an HTML table
JSON trên có một mảng gồm ba cuốn sách khác nhau với ID, tên, danh mục và giá cả. Chỉ cần ba hồ sơ cho ví dụ. Bạn có thể thêm nhiều hơn.three different Books with ID, Name, Category and Price. Just three records for the example. You can add more.
Tôi muốn chương trình đọc dữ liệu JSON, lấy các cột (ID sách, tên sách, v.v.) cho tiêu đề và các giá trị cho các tiêu đề tương ứng.
Đánh dấu và kịch bản
Trong phần đánh dấu, tôi có một nút để gọi hàm JavaScript, sẽ trích xuất dữ liệu JSON từ mảng, tạo một tiêu đề và hàng động và cuối cùng là dữ liệu trong đó. Tôi cũng có phần tử Div sẽ phục vụ như một thùng chứa cho bảng của chúng tôi. Sau khi tôi điền dữ liệu, tôi sẽ nối vào.append the
to the
.
Cách thực hiện một lần thả xuống Chọn với dữ liệu từ tệp JSON bên ngoài bằng cách sử dụng JavaScriptexternal JSON file using JavaScript
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td
{
border: solid 1px #ddd;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<input type='button' onclick='tableFromJson()' value='Create Table from JSON data' />
<p id="showData"></p>
</body>
<script>
let tableFromJson = () => {
const myBooks = [
{'Book ID': '1', 'Book Name': 'Challenging Times',
'Category': 'Business', 'Price': '125.60'
},
{'Book ID': '2', 'Book Name': 'Learn JavaScript',
'Category': 'Programming', 'Price': '56.00'
},
{'Book ID': '3', 'Book Name': 'Popular Science',
'Category': 'Science', 'Price': '210.40'
}
]
let col = [];
for (let i = 0; i < myBooks.length; i++) {
for (let key in myBooks[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
const table = document.createElement("table");
let tr = table.insertRow(-1);
for (let i = 0; i < col.length; i++) {
let th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
}
for (let i = 0; i < myBooks.length; i++) {
tr = table.insertRow(-1);
for (let j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
tabCell.innerHTML = myBooks[i][col[j]];
}
}
const divShowData = document.getElementById('showData');
divShowData.innerHTML = "";
divShowData.appendChild(table);
}
</script>
</html>
Thử nó
Dữ liệu JSON mà tôi đã đề cập được lưu trữ trong một mảng có tên MyBooks. Cấu trúc rất đơn giản và bạn có thể thêm nhiều dữ liệu vào nó.myBooks. The structure is very simple and you can add more data to it.
Bây giờ hãy tìm hiểu cách liên kết dữ liệu JSON với bảng HTML trong angularjs bằng cách sử dụng ng-lặp lại
Đầu tiên, nó trích xuất các giá trị cho tiêu đề của bảng. Vì vậy, tôi đã tuyên bố một mảng khác gọi là var col = []. Nó sẽ lặp qua từng JSON và kiểm tra chỉ mục khóa đầu tiên và lưu trữ nó trong mảng. Xem đầu ra trong cửa sổ Bảng điều khiển trình duyệt của bạn.var col = []. It will loop through each JSON and checks the first key index and store it in the array. See the output in your browsers console window.
for (let i = 0; i < myBooks.length; i++) {
for (let key in myBooks[i]) {
col.push(key);
console.log (key);
}
}
Tiếp theo, nó tạo ra một năng động với một hàng cho tiêu đề.
const table = document.createElement("table");
let tr = table.insertRow(-1);
Trong hàng đầu tiên của bảng, tôi sẽ tạo (tiêu đề bảng), gán các giá trị (từ mảng col []) cho tiêu đề và nối vào hàng.
for (let i = 0; i < col.length; i++) {
let th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
}
Cuối cùng, chúng tôi sẽ nhận được các giá trị thực dưới mỗi tiêu đề, tạo các ô cho mỗi hàng bảng và lưu trữ giá trị trong đó.
tabCell.innerHTML = myBooks[i][col[j]];
Nó giống như nhận được giá trị từ myBooks [i] của cột col [j]. Hãy nhớ Array Col [] có một danh sách các tiêu đề độc đáo.myBooks[i] of
column col [j]. Remember array col [] has a list of unique headers.
Đọc dữ liệu JSON từ tệp bên ngoài và chuyển đổi dữ liệu sang bảng HTML
Xem bản demo này
Cuối cùng, chúng tôi đang thêm mới được tạo vào một container (một phần tử div). Đó là nó. Hy vọng bạn tìm thấy ví dụ này hữu ích. Cảm ơn vì đã đọc. ☺☺
← Trước đó →Next →
Làm thế nào truyền dữ liệu từ bảng JSON sang HTML?
Hàm được sử dụng để tìm nạp đối tượng JSON vào bảng HTML bằng cách chuyển Mylist làm đối số cho phương thức HTMLTable.Một danh sách của Mylist, được thêm vào để lưu trữ dữ liệu JSON.Trong danh sách này, tên, giáo dục và địa điểm được thêm vào làm tiêu đề.Hơn nữa, các giá trị của các tiêu đề bảng này cũng được gán.passing myList as an argument to the htmltable method. A list “myList” is added to store the JSON data. In this list, Name, Education, and Location are added as headers. Moreover, the values of these table headers are also assigned.
Làm thế nào thêm thẻ dữ liệu JSON trong HTML?
4 điều bạn phải làm khi đặt HTML vào JSON:..
Các dấu ngoặc kép được sử dụng xung quanh các thuộc tính HTML như vậy.
Thoát khỏi chém về phía trước trong các thẻ kết thúc HTML.....
Điều này hoàn toàn kỳ quái.....
Hãy chắc chắn mã hóa bất kỳ dấu ngoặc kép nào có thể được bao gồm trong nội dung HTML (xấu) ..
Làm thế nào hiển thị dữ liệu JSON từ URL trong HTML?
Làm thế nào hiển thị dữ liệu JSON từ URL trong HTML ?..
fetch(url).
.sau đó (res => res. json ()).
.Sau đó ((ra) => {.
Bảng điều khiển.Đăng nhập ('Kiểm tra JSON này!', OUT) ;.
