ajax

2 years ago · fdeb2f2e56
parent 1b48daeb1c
commit fdeb2f2e56
1 changed files with 47 additions and 0 deletions
--- a/ajax.html
+++ 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>