Wie kann ich mithilfe von JavaScript eine HTML-Tabelle aus JSON-Daten generieren?

JSON-Daten in HTML-Tabelle konvertieren

Frage:

Gibt es eine Möglichkeit, dynamisch eine HTML-Tabelle aus JSON zu generieren? Daten mit jQuery oder JavaScript?

Antwort:

Ja, es gibt mehrere Bibliotheken, die Ihnen dabei helfen können. Eine gängige Option ist die Verwendung des jQuery DataTables-Plugins. Wenn Sie jedoch keine Bibliotheken verwenden möchten, können Sie Ihre eigene Tabelle auch mit reinem JavaScript erstellen.

JavaScript-Code:

Hier ist ein JavaScript-Code-Snippet dazu Erstellen Sie eine HTML-Tabelle aus JSON-Daten:

// JSON data
var myList = [
  { "name": "abc", "age": 50 },
  { "age": "25", "hobby": "swimming" },
  { "name": "xyz", "hobby": "programming" }
];

// Build the table
var table = document.createElement('table');
var headerRow = document.createElement('tr');

// Add header row with column names
for (var key in myList[0]) {
  var th = document.createElement('th');
  th.textContent = key;
  headerRow.appendChild(th);
}
table.appendChild(headerRow);

// Add data rows
for (var i = 0; i < myList.length; i++) {
  var row = document.createElement('tr');
  for (var key in myList[i]) {
    var td = document.createElement('td');
    td.textContent = myList[i][key];
    row.appendChild(td);
  }
  table.appendChild(row);
}

// Append the table to the DOM
document.body.appendChild(table);

Dieser Code geht davon aus, dass alle Objekte in der JSON-Liste denselben Schlüsselsatz haben. Wenn dies nicht der Fall ist, müssen Sie möglicherweise zusätzliche Logik hinzufügen, um fehlende Schlüssel zu verarbeiten.

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