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>