Heim > Artikel > Web-Frontend > JavaScript-JSON-Konvertierung

JavaScript-JSON-Konvertierung

PHPzOriginal: 2023-05-22 09:20:37440Durchsuche

Ausführliches Tutorial zur Konvertierung in HTML-Tabellen

In der Frontend-Entwicklung sind die Verwendung von JavaScript und JSON sehr verbreitete Technologien. Das Konvertieren von JSON-Daten in HTML-Tabellen zur Anzeige von Daten ist eine sehr praktische Funktion. In diesem Artikel wird erläutert, wie Sie mit JavaScript JSON-Daten in HTML-Tabellen konvertieren.

JSON-Daten erstellen

Zuerst müssen wir ein JSON-Objekt erstellen, das die Daten enthält. Das Folgende ist ein einfaches Beispiel:

var data = [
  {"name": "John", "age": 26, "gender": "Male"},
  {"name": "Lucy", "age": 23, "gender": "Female"},
  {"name": "Tom", "age": 30, "gender": "Male"}
];

Erstellen Sie die Grundstruktur einer HTML-Tabelle

In der HTML-Datei müssen wir die Grundstruktur einer Tabelle erstellen, einschließlich eines Tabellenkopfs und eines Tabellenkörpers. Hier ist ein Beispiel für eine grundlegende Tabellenstruktur:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

In diesem Beispiel erstellen wir eine grundlegende Tabellenstruktur, die einen Tabellenkopf und einen Tabellenkörper enthält. Die Kopfzeile enthält drei Spalten: Name, Alter und Geschlecht. In den nächsten Schritten werden wir den Inhalt des Tabellenkörpers dynamisch mithilfe von JavaScript hinzufügen.

Verwenden Sie JavaScript, um den Tabellenkörper dynamisch zu generieren

Als nächstes müssen wir JavaScript verwenden, um den Tabellenkörper dynamisch zu generieren. Das Folgende ist ein Codebeispiel:

var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];

for (var i = 0; i < data.length; i++) {
  var row = document.createElement("tr");

  var nameCell = document.createElement("td");
  var nameText = document.createTextNode(data[i].name);
  nameCell.appendChild(nameText);
  row.appendChild(nameCell);

  var ageCell = document.createElement("td");
  var ageText = document.createTextNode(data[i].age);
  ageCell.appendChild(ageText);
  row.appendChild(ageCell);

  var genderCell = document.createElement("td");
  var genderText = document.createTextNode(data[i].gender);
  genderCell.appendChild(genderText);
  row.appendChild(genderCell);

  tbody.appendChild(row);
}

In diesem Beispiel erhalten wir zuerst das Tabellenelement über die ID und dann das Tabellenkörperelement. Als Nächstes verwenden wir eine for-Schleife, um jedes Objekt in den JSON-Daten zu durchlaufen und jeder Zeile drei Tabellenzellen hinzuzufügen: Name, Alter und Geschlecht. Schließlich fügen wir jede Zeile zum Tabellenkörper hinzu.

Vollständiger HTML-Dateicode

<!DOCTYPE html>
<html>
<head>
  <title>JSON to HTML Table</title>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script>
    var data = [
      {"name": "John", "age": 26, "gender": "Male"},
      {"name": "Lucy", "age": 23, "gender": "Female"},
      {"name": "Tom", "age": 30, "gender": "Male"}
    ];

    var table = document.getElementById("myTable");
    var tbody = table.getElementsByTagName("tbody")[0];

    for (var i = 0; i < data.length; i++) {
      var row = document.createElement("tr");

      var nameCell = document.createElement("td");
      var nameText = document.createTextNode(data[i].name);
      nameCell.appendChild(nameText);
      row.appendChild(nameCell);

      var ageCell = document.createElement("td");
      var ageText = document.createTextNode(data[i].age);
      ageCell.appendChild(ageText);
      row.appendChild(ageCell);

      var genderCell = document.createElement("td");
      var genderText = document.createTextNode(data[i].gender);
      genderCell.appendChild(genderText);
      row.appendChild(genderCell);

      tbody.appendChild(row);
    }
  </script>
</body>
</html>

Erweiterte Funktion: jQuery AJAX verwenden, um JSON-Daten abzurufen

Wenn die JSON-Daten von einem Hintergrunddienst stammen, können wir jQuery AJAX verwenden, um die JSON-Daten abzurufen. Hier ist ein Beispielcode:

$.ajax({
  url: 'your_data_url',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    var table = document.getElementById("myTable");
    var tbody = table.getElementsByTagName("tbody")[0];

    for (var i = 0; i < data.length; i++) {
      var row = document.createElement("tr");

      var nameCell = document.createElement("td");
      var nameText = document.createTextNode(data[i].name);
      nameCell.appendChild(nameText);
      row.appendChild(nameCell);

      var ageCell = document.createElement("td");
      var ageText = document.createTextNode(data[i].age);
      ageCell.appendChild(ageText);
      row.appendChild(ageCell);

      var genderCell = document.createElement("td");
      var genderText = document.createTextNode(data[i].gender);
      genderCell.appendChild(genderText);
      row.appendChild(genderCell);

      tbody.appendChild(row);
    }
  }
});

In diesem Beispiel verwenden wir die Ajax-Methode von jQuery, um die Daten abzurufen. Wir erhalten die Daten von der von Ihnen angegebenen Daten-URL und der Datentyp ist das JSON-Format. Sobald wir die Daten erfolgreich erhalten haben, verwenden wir den vorherigen Code, um sie in eine HTML-Tabelle umzuwandeln.

Fazit

In diesem Artikel haben wir gelernt, wie man JavaScript und JSON verwendet, um Daten in HTML-Tabellen anzuzeigen. Dies ist eine sehr wichtige Fähigkeit für Front-End-Entwickler, die Daten anzeigen müssen. Ich hoffe, dass Sie durch die Einleitung dieses Artikels verstanden haben, wie Sie diese Funktion implementieren und sie in Ihren eigenen Projekten anwenden können.

Das obige ist der detaillierte Inhalt vonJavaScript-JSON-Konvertierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Javascript-Mehrfachauswahlfeld, um mehrere auszuwählenNächster Artikel：Javascript-Mehrfachauswahlfeld, um mehrere auszuwählen

In Verbindung stehende Artikel

Mehr sehen