Lections/upas-web-site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add table example

Browse Source
This commit is contained in:
Aleksey Filippov 2024-11-06 15:38:00 +04:00
parent 8bcb15a949
commit d1cabdb58c
2 changed files with 65 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
db.json
View File

@ -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": 3, "last_name": "Sidorov", "first_name": "Sidr", "bdate": "12.12.2000", "groupId": 2 }
{
"id": 1,
"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" }
]
}

40
page-js.html
View File

@ -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>