Day 2 of Solidabis 2022 – Noutaminen eli fetch()

1.7.2022

Olen nettisovellusaloittelija, joka tekee Solidabiksen koodihaastetta 2022. Päivitän, kuinka minulla menee ja jaan tuskani julkisesti, kun yritän rakentaa äänestyssovellusta ravintolan päättämiseksi!

Tällä kertaa ihmettelen, että miten onnistuin tulostamaan sivuilleni listan Helsingin ravintoloista APIn avulla.

Google auttaa

Minulla ei ollut hajuakaan siitä, että miten saisin APIn kautta tietoja ja sen toimimaan, joten käännyin Googlen puoleen.

Sain selville, että javascriptin kanssa puhutaan “fetch”-APIsta, jolla voi hakea tietoja muista lähteistä. Käy siis järkeen, että tätäkin kutsutaan APIksi, koska se yhdistää ja luo yhteyden kahden ohjelman välillä: Minun javascriptini ja ravintolatietojen kanssa.

Olen kyllä edelleen hukassa, että mikä API oikeastaan on. Onko se tarkasti sanottuna rajapinta, jossa tietoja päästävät ‘putket’ ovat? Onko se ohjelma? Saa kertoa.

Halusin saada ravintoloiden nimet. Googletin ja löysin hyvän koodinpätkän Medium-postauksesta (How to Use JavaScript Fetch to Display API Results in HTML). Se käsitteli Rick and Mortya, joten aina vain parempi!

Noutamisen vaiheet

Ensin minun piti siis

1. käyttää fetch()-APIa, jonka argumentiksi annan APIn nettiosoitteen, jolloin
2. fetch() tuo minulle nettiosoitteen sisällön vastauksena (response) ja
3. muutan vastauksen .then-metodin ja funktion avulla json-tiedostoksi (JSON tarkoittaa “JavaScript Object Notation”). Nyt riittää tietää, että siinä voi säilyttää tietoa ja liikuttaa sitä paikasta toiseen.

Käytin .then-metodia(, jota en myöskään täysin ymmärrä vielä). Nimenomaisesti se kai kertoo, mitä tehdään seuraavaksi, kun edellinen vaihe on tapahtunut eli, kun fetch() on toteutunut.

Näkyviin sivuille

Olen luonut HTML-puolelle (javascript ja HTML ovat eri tiedostoissa) lohkon <div>, jonka id-tunniste on "restaurant-data". Id:n avulla voin ohjata paikan, jossa haluan näyttää ravintoloiden tiedot.

Sitten käyn läpi ravintoloiden listan, jonka olen saanut fetch()-APIn kautta käyttämällä .forEach-metodia.

Käytännössä forEach on silmukka, joka käy läpi jokaisen ravintolan nimen, luo sille kappale-elementin <p> ja sijoittaa tähän elementtiin tekstin “Ravintola: [ravintolan nimi]”. [Ravintolan nimi] saadaan ravintoloiden APIsta.

Täytyy myöntää, että tässä vaiheessa olen aika tyytyväinen omaan etenemiseeni! Aluksi minulla ei ollut hajuakaan, miten API toimii tai miten saisin sivuilleni näkyviin mitään tietoja, mutta nyt siellä on jo lista ravintoloita.

Seuraavat askeleet

Seuraavaksi voisin keksiä, että miten käyttäjä voi valita itse kaupungin, eikä vain katsoa Helsingin tarjontaa. Oli myös siistiä hoksata, että tiedot päivittyvät joka päivä lounaat.info -palvelusta (vähän itsestäänselvää, mutta ihmettelin tietojen muuttumista).

Seuraa, jos haluat nähdä, mitä tapahtuu seuraavaksi! Miten tekisit vastaavan itse?