From fdeb2f2e56db52ecf63d5fdbe18ab8eba596b002 Mon Sep 17 00:00:00 2001
From: Josha <nobody>
Date: Thu, 1 Sep 2022 16:16:09 +0200
Subject: [PATCH] ajax

---
 ajax.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 ajax.html
diff --git a/ajax.html b/ajax.html
new file mode 100644
index 0000000..eacacf6
--- /dev/null
+++ b/ajax.html
@@ -0,0 +1,47 @@
+<!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>
