Pozivanje Api-a pomoću javascript feach

Javascript - fetch - API

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>