JSON データを HTML テーブルに簡単に変換するにはどうすればよいですか?

JSON データを HTML テーブルに簡単に変換

今日の Web 開発では、JSON データからテーブルを動的に生成するのが一般的なタスクです。しかし、手動で列を定義せずにこのプロセスを自動化したい場合はどうすればよいでしょうか?

JavaScript ライブラリの紹介

幸いなことに、このタスクを簡素化する JavaScript ライブラリがあります。そのようなライブラリの 1 つは、人気のある jQuery です。 JSON データに基づいて動的テーブルを構築し、キーを読み取り、それに応じて列を生成する便利な方法を提供します。

DIY アプローチ

もちろん、独自のテーブルを作成することもできます必要に応じて JavaScript ソリューションを使用してください。ただし、既存のライブラリを利用すると、特により複雑な JSON 構造を扱う場合に、時間と労力を節約できます。

コード スニペット

jQuery アプローチを好む人のために、ここにあります。ユーザーの 1 人が提供したコード スニペット:

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

このコード スニペットは、HTML テーブルを動的に生成する方法を示しています。提供された JSON データに基づいて jQuery を使用します。 buildHtmlTable 関数は JSON データを反復処理して行と列を作成し、addAllColumnHeaders 関数はすべての一意のキーを識別してテーブル ヘッダーを作成します。

このソリューションを使用すると、JSON データを視覚的に魅力的なデータに迅速かつ効率的に変換できます。動的な列生成を備えた HTML テーブル。

以上がJSON データを HTML テーブルに簡単に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。