logo

Převést data json na html tabulku [uzavřeno]

Zavřeno. Tato otázka nesplňuje pokyny pro přetečení zásobníku. Momentálně nepřijímá odpovědi.

Chcete zlepšit tuto otázku? Aktualizujte otázku, aby byla aktuální pro Stack Overflow.

Zavřeno před 7 lety.

Vylepšete tuto otázku

Existuje nějaká knihovna jQuery nebo javascript, která generuje dynamickou tabulku na základě dat json? Nechci definovat sloupce, knihovna by měla číst klíče v hash json a generovat sloupce.

Samozřejmě mohu sám iterovat data json a vygenerovat html tabulku. Chci jen vědět, zda existuje nějaká taková knihovna, kterou mohu jednoduše znovu použít.

Odpověď

Díky všem za vaše odpovědi. Sám jsem jeden napsal. Upozorňujeme, že toto používá jQuery.

Fragment kódu:

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>