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>

Css

CSS je ključan dio web dizajna i korišten je u skoro svakoj web stranici na internetu.

Datum duration

Primjer za izračun vremena između dva datuma koristeći momentjs

React

React je vrlo popularna JavaScript biblioteka za izradu korisčkog sučelja, koja se koristi u velikom broju web aplikacija

Neuronska mreža

neuronska mreža je moćan alat za obradu podataka i stvaranje modela, te se koristi u mnogim različitim aplikacijama

OOP i FF

iako postoji nekoliko razlika između FP-a i OOP-a, oba pristupa imaju svoje prednosti i nedostatke te se često koriste u kombinaciji jedni s drugima kako bi se postigao najbolji mogući rezultat u različitim programskim situacijama.

Todo lista

Kako u vue.js napraviti jednostavnu todo listu

OpenAI

OpenAI je osnovan 2015. godine, s ciljem razvijanja umjetne inteligencije na način koji će biti siguran i koristan za društvo.

Osnove

HTML je skraćenica od Hyper Text Markup Language to je standardni jezik za kreiranje web stranica