如何輕鬆將 JSON 資料轉換為 HTML 表格？

輕鬆將JSON 資料轉換為HTML 表格

在當今的Web 開發中，從JSON 資料動態產生表格是一項常見任務。但是，如果您想自動化此流程而不手動定義列怎麼辦？

介紹 JavaScript 函式庫

幸運的是，有一些 JavaScript 函式庫可以簡化此任務。流行的 jQuery 就是這樣的函式庫之一。它提供了一種基於 JSON 資料建立動態表的便捷方法，讀取鍵並相應地生成列。

DIY 方法

當然，您可以建立自己的方法JavaScript 解決方案（如果您願意）。然而，利用現有的函式庫可以節省您的時間和精力，尤其是在處理更複雜的 JSON 結構時。

程式碼片段

對於喜歡jQuery 方法的人，這裡是一位使用者提供的程式碼片段：

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

此程式碼片段示範如何使用基於jQuery 動態產生HTML 表格提供的JSON 資料。 buildHtmlTable 函數會迭代 JSON 資料來建立行和列，而 addAllColumnHeaders 函數會識別所有唯一鍵來建立表頭。

透過此解決方案，您可以快速且有效率地將 JSON 資料轉換為具有視覺吸引力的格式具有動態列產生功能的 HTML 表格。

以上是如何輕鬆將 JSON 資料轉換為 HTML 表格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！