Heim > Artikel > Web-Frontend > JavaScript-JSON-Konvertierung
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.
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"} ];
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.
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.
<!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>
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!