2 changed files with 92 additions and 0 deletions
@ -0,0 +1,24 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Fetch API</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<h1>Hledání uživatele (Fetch API)</h1> |
||||
|
<!-- Formulář --> |
||||
|
<div> |
||||
|
<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> |
||||
|
<button id="btnVse">Najít všechny</button> |
||||
|
</div> |
||||
|
<!-- Zobrazování výsledků --> |
||||
|
<div id="vystup"> |
||||
|
<p id="stav">Připraveno k hledání....</p> |
||||
|
<div id="vysledek"></div> |
||||
|
</div> |
||||
|
<script src="script.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,68 @@ |
|||||
|
const inputId = document.getElementById("userId"); |
||||
|
const btnNajdi = document.getElementById("btnNajdi"); |
||||
|
const btnVse = document.getElementById("btnVse"); |
||||
|
const stav = document.getElementById("stav"); |
||||
|
const vysledek = document.getElementById("vysledek"); |
||||
|
|
||||
|
// FUNKCE 1 : Načtení všech uživatelů
|
||||
|
async function nactiVsechny() { |
||||
|
vysledek.innerHTML = ""; |
||||
|
stav.innerText = "Načítám seznam všech uživatelů"; |
||||
|
|
||||
|
try{ |
||||
|
const odpoved = await fetch("https://jsonplaceholder.typicode.com/users") |
||||
|
if (!odpoved.ok){ |
||||
|
throw new Error("Nepodařilo se stáhnout seznam uživatelů") |
||||
|
} |
||||
|
const data = await odpoved.json(); |
||||
|
|
||||
|
//Vytvoření seznam (createElement/appendChild)
|
||||
|
const ul = document.createElement("ul"); |
||||
|
data.forEach(u => { |
||||
|
const li = document.createElement("li"); |
||||
|
li.innerText = u.name |
||||
|
ul.appendChild(li); |
||||
|
}); |
||||
|
vysledek.appendChild(ul) |
||||
|
stav.innerText = "Seznam Načten" |
||||
|
|
||||
|
|
||||
|
} catch (e) { |
||||
|
stav.innerText = "CHYBA:" + e.message; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
async function nactiJednoho() { |
||||
|
const id = inputId.value; |
||||
|
vysledek.innerHTML = ""; |
||||
|
stav.innerText = `Hledám uživatele s ID: ${id}`; |
||||
|
|
||||
|
try{ |
||||
|
const odpoved = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`) |
||||
|
if(!odpoved.ok) { |
||||
|
throw new Error(`Uživatel s ID ${id} neexistuje (HTTP ${odpoved.status})`); |
||||
|
} |
||||
|
const u = await odpoved.json(); |
||||
|
vysledek.innerHTML = ` |
||||
|
<h3>${u.name}</h3> |
||||
|
<ul> |
||||
|
<li>${u.username}</li> |
||||
|
<li>${u.email}</li> |
||||
|
<li>${u.adress}</li> |
||||
|
</ul> |
||||
|
`;//AltGR + ý = ` (Template literal) |
||||
|
stav.innerText = "Uživatel nalezen" |
||||
|
|
||||
|
} catch (error) { |
||||
|
stav.innerText = "Došlo k chybě"; |
||||
|
vysledek.innerHTML = `<p style="color:red">Chyba:${error.message}</p>` |
||||
|
console.error("Podropbnosti chyby:",error) |
||||
|
} finally { |
||||
|
console.log(`Pokus o načtení ID ${id} dokončen`); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
btnVse.addEventListener("click",nactiVsechny); |
||||
|
btnNajdi.addEventListener("click",nactiJednoho); |
||||
Loading…
Reference in new issue