Penukaran json JavaScript-Soal Jawab bahagian hadapan-php.cn

Penukaran json JavaScript

PHPz

Lepaskan： 2023-05-22 09:20:37

asal

438 orang telah melayarinya

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"}
];

Salin selepas log masuk

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>

Salin selepas log masuk

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);
}

Salin selepas log masuk

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>

Salin selepas log masuk

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);
    }
  }
});

Salin selepas log masuk

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!