Bagaimanakah Saya Boleh Menjana Jadual HTML secara Dinamik daripada Data JSON Menggunakan JavaScript?

Tukar Data JSON ke dalam Jadual HTML dengan JavaScript

Banyak tugas memerlukan penukaran data JSON kepada format yang interaktif dan boleh dibaca. Ini selalunya boleh dicapai melalui penciptaan jadual HTML. Untuk mengelakkan proses manual mentakrif lajur dan mengulangi data, pertimbangkan untuk memanfaatkan perpustakaan JavaScript untuk penjanaan jadual dinamik.

Berikut ialah contoh cara untuk mencapai ini menggunakan penyelesaian JavaScript tersuai:

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

// Building HTML Table
function buildHtmlTable(selector) {
  // Column Headers
  var columns = addAllColumnHeaders(myList, selector);

  // Table Rows
  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]] || "";
      row$.append($('<td>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

// Adding Column Headers
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;
}

Menggunakan penyelesaian JavaScript tersuai ini, anda boleh menjana jadual HTML secara dinamik daripada data JSON tanpa perlu menentukan lajur terlebih dahulu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjana Jadual HTML secara Dinamik daripada Data JSON Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!