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>

jQuery događaj

Kako povezati više input kontrola u jedan događaj (event) sa jQuery-om

Slack

Slack je komunikacijska platforma koja se koristi za timsku komunikaciju i suradnju. Osnovana je 2013. godine

JavaScript Url redirekt

Kako redirektirati url pomoću javascript-a

C64

C64 je bio vrlo pristupačan i omogućio je mnogima da se upoznaju s računalstvom

Blender Layer Weight

Blender Layer Weight kako postaviti

AI

AI se sve više koristi u različitim industrijama, uključujući tehnologiju, zdravstvo, financije, automobilsku industriju, itd. To omogućuje automatizaciju procesa, smanjenje troškova