skrabanek
/
3I_WTL_2025
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fetch api complete

master
Jakub Škrabánek 1 month ago
parent
77ff7ba4dd
commit
6a782bc985
3 changed files with 75 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      25_fetch_await/index.html
  2. 46
      25_fetch_await/script.js
  3. 21
      25_fetch_await/style.css

7
25_fetch_await/index.html
View File

@ -4,20 +4,23 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API</title> <title>Fetch API</title>
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<h1>Hledání uživatele (Fetch API)</h1> <h1>Hledání uživatele (Fetch API)</h1>
<!-- Formulář --> <!-- Formulář -->
<div> <div>
<label for="userId">Zadejte ID uživatele (1-10):</label> <label for="userId">Zadejte ID uživatele (1-10):</label>
<input type="number" name="userId" id="userId" value="1">
<button id="btnNajdi">Najít uživatele</button>
<input type="number" name="userId" id="userId" value="1" min="1" max="20">
<button id="btnNajdi">1. Najít uživatele</button>
<button id="btnPosty" disabled>2. Načíst jeho příspěvky</button>
<button id="btnVse">Najít všechny</button> <button id="btnVse">Najít všechny</button>
</div> </div>
<!-- Zobrazování výsledků --> <!-- Zobrazování výsledků -->
<div id="vystup"> <div id="vystup">
<p id="stav">Připraveno k hledání....</p> <p id="stav">Připraveno k hledání....</p>
<div id="vysledek"></div> <div id="vysledek"></div>
<div id="posty-kontejner"></div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

46
25_fetch_await/script.js
View File

@ -3,6 +3,10 @@ const btnNajdi = document.getElementById("btnNajdi");
const btnVse = document.getElementById("btnVse"); const btnVse = document.getElementById("btnVse");
const stav = document.getElementById("stav"); const stav = document.getElementById("stav");
const vysledek = document.getElementById("vysledek"); const vysledek = document.getElementById("vysledek");
const postyKontejner = document.getElementById("posty-kontejner");
const btnPosty = document.getElementById("btnPosty");
let aktualniUserId = null;
// FUNKCE 1 : Načtení všech uživatelů // FUNKCE 1 : Načtení všech uživatelů
async function nactiVsechny() { async function nactiVsechny() {
@ -36,6 +40,9 @@ async function nactiVsechny() {
async function nactiJednoho() { async function nactiJednoho() {
const id = inputId.value; const id = inputId.value;
vysledek.innerHTML = ""; vysledek.innerHTML = "";
postyKontejner.innerHTML = "";
btnPosty.disabled = true;
aktualniUserId = null;
stav.innerText = `Hledám uživatele s ID: ${id}`; stav.innerText = `Hledám uživatele s ID: ${id}`;
try{ try{
@ -43,16 +50,23 @@ async function nactiJednoho() {
if(!odpoved.ok) { if(!odpoved.ok) {
throw new Error(`Uživatel s ID ${id} neexistuje (HTTP ${odpoved.status})`); throw new Error(`Uživatel s ID ${id} neexistuje (HTTP ${odpoved.status})`);
} }
const u = await odpoved.json(); const u = await odpoved.json();
vysledek.innerHTML = ` vysledek.innerHTML = `
<h3>${u.name}</h3>
<div class="user-card">
<h3>${u.name} (ID:${u.id})</h3>
<ul> <ul>
<li>${u.username}</li> <li>${u.username}</li>
<li>${u.email}</li> <li>${u.email}</li>
<li>${u.adress}</li>
<li>${u.address.city}</li>
</ul> </ul>
</div>
`;//AltGR + ý = ` (Template literal) `;//AltGR + ý = ` (Template literal)
stav.innerText = "Uživatel nalezen" stav.innerText = "Uživatel nalezen"
//aktivace vyhledávání postů
aktualniUserId = u.id;
btnPosty.disabled = false;
btnPosty.innerText = `Načíst příspvěky (autor: ${u.name})`
} catch (error) { } catch (error) {
stav.innerText = "Došlo k chybě"; stav.innerText = "Došlo k chybě";
@ -61,8 +75,36 @@ async function nactiJednoho() {
} finally { } finally {
console.log(`Pokus o načtení ID ${id} dokončen`); console.log(`Pokus o načtení ID ${id} dokončen`);
} }
}
async function nactiPosty() {
//Pojistka pokud nemame ID
if(!aktualniUserId) return;
postyKontejner.innerHTML = "<p>Načítám příspěvky</p>";
btnPosty.disabled = true; //zabráníme opakovanému klikání během načítaní
try {
const odpoved = await fetch(`https://jsonplaceholder.typicode.com/users/${aktualniUserId}/posts`)
if(!odpoved.ok) {
throw new Error(`Uživatel s ID ${id} neexistuje (HTTP ${odpoved.status})`);
}
const posty = await odpoved.json();
const html = posty.map(p => `
<div class="post">
<strong>${p.title}</strong>
<p>${p.body}</p>
</div>
`).join("");
postyKontejner.innerHTML = `<h4>Příspěvky autora (${posty.length})</h4>` +html;
stav.innerText = "Data načtena"
} catch(e){
postyKontejner.innerHTML = `<p style="color:red">chyba:${e.message}</p>`
} finally {
btnPosty.disabled = false
}
} }
btnVse.addEventListener("click",nactiVsechny); btnVse.addEventListener("click",nactiVsechny);
btnNajdi.addEventListener("click",nactiJednoho); btnNajdi.addEventListener("click",nactiJednoho);
btnPosty.addEventListener("click",nactiPosty)

21
25_fetch_await/style.css
View File

@ -0,0 +1,21 @@
body {
line-height: 1.6;
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
#stav {
font-style: italic;
color: #666
}
.user-card {
background-color: #f8f8f8;
border-radius: 15px;
border: 1px solid lightskyblue;
padding: 15px;
}
.post {
border-left: 5px blue solid;
padding: 10px;
margin: 10px 0;
}
Write Preview
Loading…
Cancel
Save