BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] jsonデータをhtmlのテーブルに変換する【非公開

2022-08-18 12:29:46

質問

jsonデータを与えて動的なテーブルを生成するjQueryまたはjavascriptライブラリはありますか？ 私は列を定義したくない、ライブラリは、jsonハッシュ内のキーを読み取り、列を生成する必要があります。

もちろん、私自身はjsonデータを繰り返し、htmlテーブルを生成することができます。私は、単に再利用できるようなライブラリが存在するかどうかを知りたいだけです。

どのように解決するのですか？

ご回答ありがとうございました。 自分で書きました。 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.
// Need to do union of keys from all records as some records may not contain
// all records.
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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onLoad="buildHtmlTable('#excelDataTable')">
  <table id="excelDataTable" border="1">
  </table>
</body>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します