Javascript - fetch - API
Fetch funkcija u JavaScriptu je funkcija koja se koristi za dohvaćanje resursa sa mreže. Ona omogućuje aplikacijama da dohvate podatke s različitih izvora, kao što su web servisi, REST API-ji ili neki drugi resurs na mreži.
Fetch funkcija radi na temelju modernog web API-ja, fetch API-ja, koji se koristi za asinkrono dohvaćanje podataka bez blokiranja rada aplikacije. To znači da korisnik može nastaviti koristiti aplikaciju dok se podaci dohvaćaju u pozadini.
Fetch funkcija prima URL kao argument i vraća Promise objekt koji se može koristiti za dohvaćanje podataka. Kada se Promise objekt riješi, on vraća Response objekt koji sadrži podatke koje je aplikacija dohvatila. Response objekt može se tada koristiti za čitanje podataka, a to se može učiniti pomoću metoda kao što su json() ili text().
Fetch funkcija je jednostavna za korištenje i omogućuje jednostavno dohvaćanje podataka s mreže. To je sjajna alternativa starim, preopterećenim tehnikama poput XHR i korištenje fetch funkcije može donijeti brže i čišće rješenja u vašim aplikacijama.
Kako dohvatiti podatke iz API-a, u javascript-u pozivom funkcije fetch dohvačamo podatke iz API-a. Podaci se koji se dohvačaju u API-u su u Json formatu. U primjeru šaljemo početno slovo ili nekoliko slova, nakon kojih nam Api dohvaća riječi koje počimlju sa zadanim slovom. Demo primjer možete vidjeti ovdje
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Api .Core</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
async function fetchText(x) {
let response = await fetch('https://programiranje.com.hr/api/Word/'+x);
let data = await response.json();
CreateTableFromJSON(data)
}
</script>
<div class="container">
<div class="row">
<div class="col-sm-8 m-1 p-2" ><input type="text" placeholder="Unesi slovo" onkeyup="fetchText(this.value)" /></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div id="showData" class="col-sm-5"></div>
<div class="col-sm-5"></div>
<div class="col-sm-2"></div>
</div>
</div>
<script>
function CreateTableFromJSON(d) {
var myBooks = d
var col = [];
for (var i = 0; i < myBooks.length; i++) {
for (var key in myBooks[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
var table = document.createElement("table");
table.className = "table";
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
for (var i = 0; i < myBooks.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myBooks[i][col[j]];
}
}
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
</script>
</body>
</html>