JavaScript を使用して JSON データから HTML テーブルを動的に生成するにはどうすればよいですか?

JavaScript を使用して JSON データを HTML テーブルに変換する

多くのタスクでは、JSON データを対話型で読み取り可能な形式に変換する必要があります。多くの場合、これは HTML テーブルの作成によって実現できます。列を定義してデータを反復処理する手動プロセスを回避するには、動的テーブル生成に JavaScript ライブラリを活用することを検討してください。

カスタム JavaScript ソリューションを使用してこれを実現する方法の例を次に示します。

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

このカスタム JavaScript ソリューションを利用すると、事前に列を定義しなくても、JSON データから HTML テーブルを動的に生成できます。

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