Bagaimanakah Saya Boleh Menukar Data JSON ke dalam Jadual HTML dengan Mudah?

Tukar Data JSON kepada Jadual HTML dengan Mudah

Dalam pembangunan web hari ini, menjana jadual secara dinamik daripada data JSON ialah tugas biasa. Tetapi bagaimana jika anda mahu mengautomasikan proses ini tanpa menentukan lajur secara manual?

Memperkenalkan Pustaka JavaScript

Nasib baik, terdapat perpustakaan JavaScript yang memudahkan tugas ini. Satu perpustakaan sedemikian ialah jQuery yang popular. Ia menawarkan cara yang mudah untuk membina jadual dinamik berdasarkan data JSON, membaca kunci dan menjana lajur dengan sewajarnya.

Pendekatan DIY

Sudah tentu, anda boleh mencipta sendiri Penyelesaian JavaScript jika anda mahu. Walau bagaimanapun, menggunakan perpustakaan sedia ada boleh menjimatkan masa dan usaha anda, terutamanya apabila berurusan dengan struktur JSON yang lebih kompleks.

Coretan Kod

Bagi mereka yang lebih suka pendekatan jQuery, berikut ialah coretan kod yang disediakan oleh salah seorang pengguna:

var myList = [
  { "name": "abc", "age": 50 },
  { "age": "25", "hobby": "swimming" },
  { "name": "xyz", "hobby": "programming" }
];

// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
  var columns = addAllColumnHeaders(myList, selector);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append($('<td>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

// Adds a header row to the table and returns the set of columns.
function addAllColumnHeaders(myList, selector) {
  var columnSet = [];
  var headerTr$ = $('<tr>');

  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th>').html(key));
      }
    }
  }
  $(selector).append(headerTr$);

  return columnSet;
}

// Example Usage
$(document).ready(function() {
  buildHtmlTable('#excelDataTable');
});

Coretan kod ini menunjukkan cara menjana jadual HTML secara dinamik menggunakan jQuery berdasarkan data JSON yang disediakan. Fungsi buildHtmlTable berulang melalui data JSON untuk membuat baris dan lajur, manakala fungsi addAllColumnHeaders mengenal pasti semua kunci unik untuk mencipta pengepala jadual.

Dengan penyelesaian ini, anda boleh menukar data JSON dengan cepat dan cekap kepada visual yang menarik. Jadual HTML dengan penjanaan lajur dinamik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Data JSON ke dalam Jadual HTML dengan Mudah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!