JSON (JavaScript Object Notation) ist ein leistungsstarkes Datenformat, das für den Datenaustausch zwischen Servern und Clients verwendet wird. HTML-Tabellen sind leistungsstarke Tools zur Darstellung von Daten in einem Tabellenformat, die das Lesen, Analysieren und Vergleichen sehr einfach machen. In der Webentwicklung ist es üblich, JSON-Daten in HTML-Tabellen zu konvertieren.
In diesem Artikel erfahren Sie, wie Sie JSON-Daten mithilfe von Javascript und jQuery in eine HTML-Tabelle konvertieren. Nachdem Sie diesen Artikel gelesen haben, verfügen Sie über ein solides Verständnis der Konvertierung von JSON-zu-HTML-Tabellen.
Konvertieren Sie JSON-Daten mit JavaScript in eine HTML-Tabelle.
Hier sind die Schritte zum Erstellen einer HTML-Tabelle mit JSON-Daten.
Erstellen Sie eine Funktion namens „Konvertieren“.
Erstellen Sie Beispiel-JSON-Daten.
Verwenden Sie getElementByID("container"), um den Container abzurufen, in den wir die Tabelle anhängen.
Holen Sie sich den Schlüssel des ersten Objekts der JSON-Daten, damit wir den Titel der Tabelle erhalten können.
Durchlaufen Sie die Spaltennamen, erstellen Sie Kopfzellen und legen Sie die Spaltennamen auf den Text der Kopfzelle fest.
Kopfzellen an Kopfzeilen anhängen und dann Kopfzeilen an Kopfzeilen anhängen
Titel an Tabelle anhängen
Durchlaufen Sie JSON-Daten, erstellen Sie Tabellenzeilen, verwenden Sie Object.values(item), um den Wert des aktuellen Objekts in den JSON-Daten abzurufen, und erstellen Sie Tabellenzellen.
Legen Sie den Wert auf den Text der Tabellenzelle fest, hängen Sie die Tabellenzelle an die Tabellenzeile an und hängen Sie dann die Tabellenzeile an die Tabelle an.
Beispiel
In diesem Beispiel verwenden wir Javascript, um JSON-Daten in eine HTML-Tabelle zu konvertieren.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
padding: 10px;
}
</style>
</head>
<body>
<h2>Convert JSON data into a html table using Javascript</h2>
<p>Click the following button to convert JSON results into HTML table</p><br>
<button id="btn" onclick="convert( )"> Click Here </button> <br>
<h3> Resulting Table: </h3>
<div id="container"></div>
<script>
// Function to convert JSON data to HTML table
function convert() {
// Sample JSON data
let jsonData = [
{
name: "Saurabh",
age: "20",
city: "Prayagraj"
},
{
name: "Vipin",
age: 23,
city: "Lucknow",
},
{
name: "Saksham",
age: 21,
city: "Noida"
}
];
// Get the container element where the table will be inserted
let container = document.getElementById("container");
// Create the table element
let table = document.createElement("table");
// Get the keys (column names) of the first object in the JSON data
let cols = Object.keys(jsonData[0]);
// Create the header element
let thead = document.createElement("thead");
let tr = document.createElement("tr");
// Loop through the column names and create header cells
cols.forEach((item) => {
let th = document.createElement("th");
th.innerText = item; // Set the column name as the text of the header cell
tr.appendChild(th); // Append the header cell to the header row
});
thead.appendChild(tr); // Append the header row to the header
table.append(tr) // Append the header to the table
// Loop through the JSON data and create table rows
jsonData.forEach((item) => {
let tr = document.createElement("tr");
// Get the values of the current object in the JSON data
let vals = Object.values(item);
// Loop through the values and create table cells
vals.forEach((elem) => {
let td = document.createElement("td");
td.innerText = elem; // Set the value as the text of the table cell
tr.appendChild(td); // Append the table cell to the table row
});
table.appendChild(tr); // Append the table row to the table
});
container.appendChild(table) // Append the table to the container element
}
</script>
</body>
</html>
Nach dem Login kopieren
Beispiel: JSON-Daten mit jQuery in eine HTML-Tabelle konvertieren
Hier ist der Code zum Konvertieren von JSON-Daten in eine HTML-Tabelle mit jQuery.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
td, th {padding: 10px;}
</style>
</head>
<body>
<h2>Convert JSON data into a html table using Jquery</h2>
<p>Click the following button to convert JSON results into HTML table</p> <br>
<button id="btn" onclick="convert( )"> Click Here </button> <br>
<h3> Resulting Table: </h3>
<div id="container"></div>
<script>
// Function to convert JSON data to HTML table
function convert() {
// Sample JSON data
let jsonData = [
{
name: "Saurabh",
age: "20",
city: "Prayagraj"
},
{
name: "Vipin",
age: 23,
city: "Lucknow",
},
{
name: "Saksham",
age: 21,
city: "Noida"
}
];
// Get the container element where the table will be inserted
let container = $("#container");
// Create the table element
let table = $("<table>");
// Get the keys (column names) of the first object in the JSON data
let cols = Object.keys(jsonData[0]);
// Create the header element
let thead = $("<thead>");
let tr = $("<tr>");
// Loop through the column names and create header cells
$.each(cols, function(i, item){
let th = $("<th>");
th.text(item); // Set the column name as the text of the header cell
tr.append(th); // Append the header cell to the header row
});
thead.append(tr); // Append the header row to the header
table.append(tr) // Append the header to the table
// Loop through the JSON data and create table rows
$.each(jsonData, function(i, item){
let tr = $("<tr>");
// Get the values of the current object in the JSON data
let vals = Object.values(item);
// Loop through the values and create table cells
$.each(vals, (i, elem) => {
let td = $("<td>");
td.text(elem); // Set the value as the text of the table cell
tr.append(td); // Append the table cell to the table row
});
table.append(tr); // Append the table row to the table
});
container.append(table) // Append the table to the container element
}
</script>
</body>
</html>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie konvertiere ich JSON-Daten mit JavaScript/jQuery in eine HTML-Tabelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
