Wie kann ich mit JavaScript dynamisch HTML-Tabellen aus JSON-Daten generieren?

JSON-Daten mit JavaScript in eine HTML-Tabelle konvertieren

Viele Aufgaben erfordern die Konvertierung von JSON-Daten in ein interaktives und lesbares Format. Dies kann oft durch die Erstellung einer HTML-Tabelle erreicht werden. Um den manuellen Prozess des Definierens von Spalten und des Durchlaufens der Daten zu vermeiden, sollten Sie JavaScript-Bibliotheken für die dynamische Tabellengenerierung nutzen.

Hier ist ein Beispiel, wie dies mit einer benutzerdefinierten JavaScript-Lösung erreicht werden kann:

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

Mit dieser benutzerdefinierten JavaScript-Lösung können Sie HTML-Tabellen dynamisch aus JSON-Daten generieren, ohne vorher Spalten definieren zu müssen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript dynamisch HTML-Tabellen aus JSON-Daten generieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!