mirror of
https://github.com/lucheng0127/virtuallan.git
synced 2026-04-22 15:57:22 +08:00
lucheng
81 lines
2.7 KiB
HTML
81 lines
2.7 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
table, th, td {
|
|
border: 1px solid black;
|
|
border-collapse: collapse;
|
|
}
|
|
td, th {
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onload="convert();">
|
|
<h3> VirtualLan Endpoints: </h3>
|
|
<div id="container"></div>
|
|
<script>
|
|
|
|
setInterval(convert, 5000)
|
|
|
|
// Function to convert JSON data to HTML table
|
|
function convert() {
|
|
|
|
// Sample JSON data
|
|
let jsonData = []
|
|
fetch("/endpoints")
|
|
.then(res => res.json())
|
|
.then(out =>
|
|
{
|
|
jsonData = out
|
|
|
|
// Get the container element where the table will be inserted
|
|
let container = document.getElementById("container");
|
|
|
|
// Create the table element
|
|
if (document.contains(document.getElementById("table"))) {
|
|
document.getElementById("table").remove();
|
|
}
|
|
let table = document.createElement("table");
|
|
table.setAttribute("id", "table")
|
|
|
|
// Get the keys (column names) of the first object in the JSON data
|
|
if (jsonData) {
|
|
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
|
|
}
|
|
})
|
|
.catch(err => { throw err });
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|