Add table example

db.json

@@ -3,12 +3,37 @@
     "comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
     "profile": { "name": "typicode" },
     "students": [
-        { "id": 1, "last_name": "Ivanov", "first_name": "Ivan", "bdate": "01.01.1999", "groupId": 1 },
+        {
-        { "id": 2, "last_name": "Petrov", "first_name": "Petr", "bdate": "12.12.2000", "groupId": 1 },
+            "id": 1,
-        { "id": 3, "last_name": "Sidorov", "first_name": "Sidr", "bdate": "12.12.2000", "groupId": 2 }
+            "last_name": "Ivanov",
+            "first_name": "Ivan",
+            "bdate": "01.01.1999",
+            "email": "i.ivanov@mail.ru",
+            "phone": "8 111 111 11 11",
+            "groupId": 1
+        },
+        {
+            "id": 2,
+            "last_name": "Petrov",
+            "first_name": "Petr",
+            "bdate": "12.12.2000",
+            "email": "p.petrov@mail.ru",
+            "phone": "8 222 222 22 22",
+            "groupId": 1
+        },
+        {
+            "id": 3,
+            "last_name": "Sidorov",
+            "first_name": "Sidr",
+            "bdate": "12.12.2000",
+            "email": "s.sidorov@mail.ru",
+            "phone": "8 333 333 33 33",
+            "groupId": 2
+        }
     ],
     "groups": [
         { "id": 1, "name": "SomeGroup-11" },
-        { "id": 2, "name": "SomeGroup-12" }
+        { "id": 2, "name": "SomeGroup-12" },
+        { "id": 2, "name": "SomeGroup-13" }
     ]
 }

page-js.html

@@ -35,24 +35,56 @@
             </div>
         </nav>
     </header>
-    <main id="students" class="container-fluid p-3">
+    <main class="container-fluid p-3">
+        <table class="table table-sm table-hover">
+            <thead>
+                <tr>
+                <th scope="col">#</th>
+                <th scope="col">Last</th>
+                <th scope="col">First</th>
+                <th scope="col">Birthday</th>
+                <th scope="col">E-Mail</th>
+                <th scope="col">Phone</th>
+                <th scope="col">Group</th>
+                </tr>
+            </thead>
+            <tbody id="students">
+            </tbody>
+        </table>
     </main>
     <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
         Автор, 2022
     </footer>
     <script type="module">
-        const getPosts = async () => {
+        const getStudents = async () => {
             const students = document.getElementById("students");
             const response = await fetch("http://localhost:3001/students?_embed=group");
             const data = await response.json();
             data.forEach(element => {
-                students.innerHTML += `<p>${element.last_name} - ${element.group.name}</p>`;
+                const createTd = (value) => {
+                    const td = document.createElement("td");
+                    td.innerText = value;
+                    return td;
+                };
+
+                const container = document.createElement("tr");
+                const id = document.createElement("th");
+                id.setAttribute("scope", "row");
+                id.innerText = element.id;
+                container.appendChild(id);
+                container.appendChild(createTd(element.last_name));
+                container.appendChild(createTd(element.first_name));
+                container.appendChild(createTd(element.bdate));
+                container.appendChild(createTd(element.email));
+                container.appendChild(createTd(element.phone));
+                container.appendChild(createTd(element.group.name));
+                students.appendChild(container);
             });
             console.log(data);
         };
 
         document.addEventListener("DOMContentLoaded", () => {
-            getPosts();
+            getStudents();
         });
     </script>
 </body>