64 lines
2.0 KiB
HTML
64 lines
2.0 KiB
HTML
<script>
|
|
async function fetchDataForTable() {
|
|
try {
|
|
const apiEndpoint = `${apiURL}/{{ .Get "endpoint" }}`;
|
|
const response = await fetch(apiEndpoint);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const fetchedData = await response.json();
|
|
data = fetchedData;
|
|
console.log(data);
|
|
createTable(data);
|
|
} catch (error) {
|
|
console.error("Fetching data failed:", error);
|
|
}
|
|
}
|
|
|
|
function createTable(data) {
|
|
const jsonTableContainer = document.getElementById("jsonTableContainer");
|
|
jsonTableContainer.innerHTML = "";
|
|
jsonTableContainer.style.maxHeight = "{{ .Get `maxHeight` }}"
|
|
|
|
tableHeaderNames = Object.values({{ .Get `headers` | safeJS }});
|
|
tableHeaderKeys = Object.keys({{ .Get `headers` | safeJS }});
|
|
|
|
const table = document.createElement("table");
|
|
table.id = "{{ .Get `id` }}"
|
|
const thead = document.createElement("thead");
|
|
const tbody = document.createElement("tbody");
|
|
const headerRow = document.createElement("tr");
|
|
tableHeaderNames.forEach((header) => {
|
|
const th = document.createElement("th");
|
|
th.textContent = header;
|
|
headerRow.appendChild(th);
|
|
});
|
|
thead.appendChild(headerRow);
|
|
table.appendChild(thead);
|
|
|
|
for (const key in data) {
|
|
const row = document.createElement('tr');
|
|
tableHeaderKeys.forEach((columnName) => {
|
|
const td = document.createElement("td");
|
|
const div = document.createElement("div");
|
|
div.id = "scrollable";
|
|
div.textContent = data[key][columnName];
|
|
td.appendChild(div);
|
|
row.appendChild(td);
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
table.appendChild(thead);
|
|
table.appendChild(tbody);
|
|
jsonTableContainer.appendChild(table)
|
|
{{ if eq (.Get "sortable") "true" }}
|
|
table.className = "sortable"
|
|
sorttable.makeSortable(document.getElementById("{{ .Get `id` }}"));
|
|
{{ end }}
|
|
|
|
table.className = ""
|
|
}
|
|
</script>
|
|
<div id="jsonTableContainer"></div>
|
|
<script src="/js/lib/sorttable.js"></script>
|