98 lines
2.8 KiB
HTML
98 lines
2.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Table View</title>
|
||
|
|
<style>
|
||
|
|
table {
|
||
|
|
border-collapse: collapse;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
th, td {
|
||
|
|
text-align: left;
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr:nth-child(even){background-color: #f2f2f2}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<table id="yield-table">
|
||
|
|
<thead></thead>
|
||
|
|
<tbody></tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
function createTable(data) {
|
||
|
|
const table = document.createElement('table');
|
||
|
|
|
||
|
|
// Get all row and column indexes
|
||
|
|
const colIndexes = Object.keys(data[Object.keys(data)[0]]);
|
||
|
|
const rowIndexes = Object.keys(data);
|
||
|
|
|
||
|
|
const thead = document.createElement('thead');
|
||
|
|
const hRow = document.createElement('tr');
|
||
|
|
|
||
|
|
// Empty cell in the top-left corner
|
||
|
|
hRow.appendChild(document.createElement('th'));
|
||
|
|
|
||
|
|
colIndexes.forEach(colIndex => {
|
||
|
|
const cell = document.createElement('th');
|
||
|
|
cell.textContent = colIndex;
|
||
|
|
hRow.appendChild(cell);
|
||
|
|
});
|
||
|
|
|
||
|
|
thead.appendChild(hRow);
|
||
|
|
table.appendChild(thead);
|
||
|
|
|
||
|
|
const tbody = document.createElement('tbody');
|
||
|
|
|
||
|
|
rowIndexes.forEach(rowIndex => {
|
||
|
|
const tRow = document.createElement('tr');
|
||
|
|
|
||
|
|
const rowHeader = document.createElement('th');
|
||
|
|
rowHeader.textContent = rowIndex;
|
||
|
|
tRow.appendChild(rowHeader);
|
||
|
|
|
||
|
|
colIndexes.forEach(colIndex => {
|
||
|
|
const cell = document.createElement('td');
|
||
|
|
cell.textContent = data[rowIndex][colIndex];
|
||
|
|
tRow.appendChild(cell);
|
||
|
|
});
|
||
|
|
|
||
|
|
tbody.appendChild(tRow);
|
||
|
|
});
|
||
|
|
table.appendChild(tbody);
|
||
|
|
|
||
|
|
return table;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function parseAndRenderData(data) {
|
||
|
|
for (const [tableName, tableData] of Object.entries(data)) {
|
||
|
|
// Parse JSON into object
|
||
|
|
const parsedData = JSON.parse(tableData);
|
||
|
|
|
||
|
|
const tableTitle = document.createElement('H2');
|
||
|
|
tableTitle.innerHTML = tableName;
|
||
|
|
document.body.appendChild(tableTitle);
|
||
|
|
|
||
|
|
// Create table and header
|
||
|
|
const table = createTable(parsedData);
|
||
|
|
|
||
|
|
// Append table to the body of the HTML
|
||
|
|
document.body.appendChild(table);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
fetch('https://gammaworld.gmgauthier.com/matrices/dump')
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
parseAndRenderData(data)
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|