You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

48 lines
1.7 KiB

2 years ago
<!DOCTYPE html>
<html lang>
<head>
<meta charset="utf-8">
<title>Motörhead Songs</title>
</head>
<body>
<table>
<thead>
<tr>
<th data-attr="title">Song Title</th>
<th data-attr="album">Album</th>
<th data-attr="year">Year *</th>
<th data-attr="rank">Rank</th>
</tr>
</thead>
</table>
<script>
document.querySelectorAll("table").forEach((table) => {
const cols = [];
table.querySelectorAll("th[data-attr]").forEach((th) => {
cols.push(th.getAttribute("data-attr"));
});
fetch("/content.json")
.then((content) => content.json())
.then((json) => {
const tblBody = document.createElement("tbody");
json.forEach((jsonRow) => {
const tr = document.createElement("tr");
cols.forEach((colName) => {
const td = document.createElement("td");
td.innerText = jsonRow[colName];
tr.insertAdjacentElement("beforeend", td);
});
tblBody.insertAdjacentElement("beforeend", tr);
});
table.insertAdjacentElement("beforeend", tblBody);
});
});
</script>
</body>
</html>