Rumah > Artikel > hujung hadapan web > Penukaran json JavaScript
Penukaran json JavaScript
- PHPzasal
- 2023-05-22 09:20:37436semak imbas
Tutorial terperinci tentang menukar kepada jadual HTML
Dalam pembangunan bahagian hadapan, menggunakan JavaScript dan JSON adalah teknologi yang sangat biasa. Menukar data JSON ke dalam jadual HTML untuk memaparkan data adalah fungsi yang sangat praktikal. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menukar data JSON ke dalam jadual HTML.
- Membuat data JSON
Pertama, kita perlu mencipta objek JSON yang mengandungi data. Berikut ialah contoh mudah:
var data = [
{"name": "John", "age": 26, "gender": "Male"},
{"name": "Lucy", "age": 23, "gender": "Female"},
{"name": "Tom", "age": 30, "gender": "Male"}
];- Mencipta struktur asas jadual HTML
Dalam fail HTML, kita perlu mencipta struktur asas jadual, termasuk pengepala dan badan Borang. Berikut ialah contoh struktur jadual asas:
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
</tbody>
</table>Dalam contoh ini, kami mencipta struktur jadual asas yang mengandungi pengepala jadual dan badan jadual. Pengepala mengandungi tiga lajur: Nama, Umur dan Jantina. Kami akan menambah kandungan badan jadual secara dinamik menggunakan JavaScript dalam langkah seterusnya.
- Gunakan JavaScript untuk menjana badan jadual secara dinamik
Seterusnya, kita perlu menggunakan JavaScript untuk menjana badan jadual secara dinamik. Berikut ialah contoh kod:
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
var nameCell = document.createElement("td");
var nameText = document.createTextNode(data[i].name);
nameCell.appendChild(nameText);
row.appendChild(nameCell);
var ageCell = document.createElement("td");
var ageText = document.createTextNode(data[i].age);
ageCell.appendChild(ageText);
row.appendChild(ageCell);
var genderCell = document.createElement("td");
var genderText = document.createTextNode(data[i].gender);
genderCell.appendChild(genderText);
row.appendChild(genderCell);
tbody.appendChild(row);
}Dalam contoh ini, kita mula-mula mendapatkan elemen jadual melalui id, dan kemudian mendapatkan elemen badan jadual. Seterusnya, kami menggunakan gelung for untuk menggelung melalui setiap objek dalam data JSON dan menambah tiga sel jadual pada setiap baris: nama, umur dan jantina. Akhir sekali, kami menambah setiap baris pada badan jadual.
- Kod fail HTML lengkap
<!DOCTYPE html>
<html>
<head>
<title>JSON to HTML Table</title>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var data = [
{"name": "John", "age": 26, "gender": "Male"},
{"name": "Lucy", "age": 23, "gender": "Female"},
{"name": "Tom", "age": 30, "gender": "Male"}
];
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
var nameCell = document.createElement("td");
var nameText = document.createTextNode(data[i].name);
nameCell.appendChild(nameText);
row.appendChild(nameCell);
var ageCell = document.createElement("td");
var ageText = document.createTextNode(data[i].age);
ageCell.appendChild(ageText);
row.appendChild(ageCell);
var genderCell = document.createElement("td");
var genderText = document.createTextNode(data[i].gender);
genderCell.appendChild(genderText);
row.appendChild(genderCell);
tbody.appendChild(row);
}
</script>
</body>
</html>- Fungsi lanjutan: gunakan jQuery AJAX untuk mendapatkan data JSON
Jika data JSON datang daripada perkhidmatan latar belakang, kita boleh menggunakan jQuery AJAX untuk mendapatkan data JSON. Berikut ialah kod sampel:
$.ajax({
url: 'your_data_url',
type: 'GET',
dataType: 'json',
success: function(data) {
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
var nameCell = document.createElement("td");
var nameText = document.createTextNode(data[i].name);
nameCell.appendChild(nameText);
row.appendChild(nameCell);
var ageCell = document.createElement("td");
var ageText = document.createTextNode(data[i].age);
ageCell.appendChild(ageText);
row.appendChild(ageCell);
var genderCell = document.createElement("td");
var genderText = document.createTextNode(data[i].gender);
genderCell.appendChild(genderText);
row.appendChild(genderCell);
tbody.appendChild(row);
}
}
});Dalam contoh ini, kami menggunakan kaedah ajax jQuery untuk mendapatkan data. Kami akan mendapatkan data daripada url data yang anda berikan, dan jenis data ialah format JSON. Setelah kami berjaya mendapatkan data, kami menggunakan kod sebelumnya untuk menukarnya menjadi jadual HTML.
Kesimpulan
Dalam artikel ini, kami mempelajari cara menggunakan JavaScript dan JSON untuk memaparkan data ke dalam jadual HTML. Ini adalah kemahiran yang sangat penting untuk pembangun bahagian hadapan yang perlu memaparkan data. Saya berharap melalui pengenalan artikel ini, anda telah memahami cara melaksanakan fungsi ini dan boleh mengaplikasikannya dalam projek anda sendiri.
Atas ialah kandungan terperinci Penukaran json JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!