12. diel - Ajaxu v JavaScripte - Prehliadač pokemonov

Dnes naprogramujeme prehliadač pokemonov pomocou AJAXu.

Odpoveď servera

Zamerajme sa teraz na vrátená dáta vo formáte JSON. Odpoveď servera vyzerá nasledovne (už sme ju videli, tak ju tu skrátim a tiež lepšie naformátujeme):

{
    "count":964,
    "next":"https://pokeapi.co/api/v2/pokemon?offset=20&limit=20",
    "previous":null,
    "results":
    [
        {"name":"bulbasaur","url":"https://pokeapi.co/api/v2/pokemon/1/"},
        {"name":"ivysaur","url":"https://pokeapi.co/api/v2/pokemon/2/"},
        ...,
        {"name":"raticate","url":"https://pokeapi.co/api/v2/pokemon/20/"}
    ]
}

Hneď prvá položka (count) na vrátenom objektu nám hovorí, že už existuje neuveriteľných 964 pokemonov. Najviac nás zaujíma poľa results, kde sú objekty s menami pokemonov a adresami na API s ich detailmi. Ako to, že je v poli ale iba 20 pokemonov, keď ich je celkom skoro 1000? Nie je to chyba, je to tým, že zdroj na tejto URL sa správa tak, že vráti len prvých 20 pokemonov, aby nezaťažoval server. V položke next nám navyše ponúkne URL, ktorá načíta 20 nasledujúcich pokemonov. Spravidla totiž nepotrebujeme užívateľovi zobraziť 1000 položiek naraz, namiesto toho API očakáva, že ich budeme načítavať priebežne (napríklad pri scrollovanie stránkou dole). Ak by sme chceli stiahnuť všetky pokemonmi naraz, musíme upraviť parameter limit v URL: https://pokeapi.co/api/v2/pokemon?limit=1000":https://pokeapi.co/api/v2/pokemon?limit=1000

Prehliadač pokemonov

Teraz teda vieme sťahovať dáta a je len na nás, ako s nimi naložíme. Poďme si naprogramovať jednoduchý prehliadač pokemonov.

stahniJSON()

Budeme už robiť viac request, preto si to zjednodušíme novou funkciou stahniJSON(url, callback):

function stahniJSON(url, callback)
{
    let xhr = new XMLHttpRequest();
    xhr.onload = () => {
        callback(JSON.parse(xhr.response));
    }
    xhr.open("GET", url);
    xhr.send();
}

Funkcia len obaľuje vytvorenie, otvorenie a odoslania požiadavky, aby sme nemuseli písať zakaždým to isté znova. Všimnite si parsovanie JSON do objektu pomocou JSON.parse(), pretože odpoveďou servera je samozrejme text.

Html kostra

Pripravíme si základné HTML kostru stránky, do ktorej budeme Ajaxu sťahovať zoznam pokemonov a následne dokonca zobrazovať detaily vybraného pokémona, vrátane jeho obrázku:) Budeme teda potrebovať jeden <div> pre zoznam pokemonov a jeden pre detaily jedného pokemona:

<div class="poke-container">
    <div id="poke-seznam"></div>
    <div id="poke-detaily"></div>
</div>

Teraz sa budú hodiť funkcia nactiSeznam(url) a nactiPokemona(url), ktoré stiahnu dáta a prepíšu obsah na stránke. Poďme si ich naprogramovať.

Načítanie zoznamu

Kód funkcia, ktorá pošle na server dotaz na zoznam pokemonov a potom ho vypíše do stránky, je nasledujúci:

function nactiSeznam(url)
{
    let seznam_div = document.getElementById("poke-seznam");
    seznam_div.innerHTML = "<ul id='poke-seznam-ul'></ul>";
    let seznam_ul = document.getElementById("poke-seznam-ul");

    stahniJSON(url, (data) => {
        for (let pokemon of data.results)
        {
            let novaPolozka = document.createElement("li");
            novaPolozka.innerText = pokemon.name;
            seznam_ul.appendChild(novaPolozka);
            let poke_url = pokemon.url;
            novaPolozka.addEventListener("click", () => nactiPokemona(poke_url));
        }
    });
}

Na kódu nie je veľmi čo vysvetľovať, ide o základnú prácu s DOM elementy. Pokémonov vo vlastnosti results JSON objektu vráteného pomocou API prejdeme cyklom a pre každého vytvoríme položku zoznamu. Za zmienku stojí, že ku každej položke pridáme event listener, ktorý zavolá nactiPokemona() s patričnou URL získanou z dát API, keď sa na položku klikne.

Každé API pochopiteľne odpovedá v špecifickom formáte a musíme si naštudovať, ako s ním pracovať.

Načítanie pokemona

Pozrime si, ako vyzerá JSON s detailom nejakého pokémona, čo nám osvetlí, aké dáta preniesť do našej aplikácie. Kvôli všetkým útokom pokemona a ich detailom je JSON naozaj vyčerpávajúci, pre naše účely si tieto časti uvádzať nebudeme, nižšie sú nahradené troma bodkami ...:

{
    "abilities": [
        ...
    ],
    "base_experience": 64,
    "forms": [
        ...
    ],
    "game_indices": [
        ...
    ],
    "height": 7,
    "held_items": [],
    "id": 1,
    "is_default": true,
    "location_area_encounters": "https://pokeapi.co/api/v2/pokemon/1/encounters",
    "moves": [
        ...
            ]
        }
    ],
    "name": "bulbasaur",
    "order": 1,
    "species": {
        "name": "bulbasaur",
        "url": "https://pokeapi.co/api/v2/pokemon-species/1/"
    },
    "sprites": {
        "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/1.png",
        "back_female": null,
        "back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/1.png",
        "back_shiny_female": null,
        "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
        "front_female": null,
        "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png",
        "front_shiny_female": null
    },
    "stats": [
        ...
    ],
    "types": [
        {
            "slot": 2,
            "type": {
                "name": "poison",
                "url": "https://pokeapi.co/api/v2/type/4/"
            }
        },
        {
            "slot": 1,
            "type": {
                "name": "grass",
                "url": "https://pokeapi.co/api/v2/type/12/"
            }
        }
    ],
    "weight": 69
}

Vyššie vidíme JSON pre Bulbasaur, konkrétne stiahnutý z URL https://pokeapi.co/api/v2/pokemon/1/, kde parameter 1 udáva číslo pokemona. Zaujíma nás najmä vlastnosť name s názvom pokémona, sprites s jeho obrázkami, height s výškou a weight s váhou danej potvorky. Samozrejme by sme mohli aj vypísať napr. Typy pokémona, vidíme, že zrovna Bulbasaur je jedovatý a zároveň trávne typ.

Kód funkcie posielajúcimi dotaz na konkrétneho pokemona je potom nasledovné:

function nactiPokemona(url)
{
    let detaily_div = document.getElementById("poke-detaily");
    stahniJSON(url, (data) => {
        let html = `
            <img src="${data.sprites.back_default}" />
            <ul>
                <li>Název: ${data.name}</li>
                <li>Výška: ${data.height}</li>
                <li>Váha: ${data.weight}</li>
            </ul>
        `;

        detaily_div.innerHTML = html;
    });
}

Zavolanie načítanie zoznamu

Všetko máme pripravené. Stačí už len zavolať načítanie zoznamu:

nactiSeznam("https://pokeapi.co/api/v2/pokemon");

Interaktívne ukážka

Výsledok môže vyzerať napríklad takto, záleží na vašom ostylování. Po kliknutí na položku sa načítajú základné informácie o Pokémonovi a obrázok. Skúste si to na interaktívnom prehliadači nižšie:

Týmto možnosti API s Pokémonmi naozaj nekončí:) Ako sami vidíte, API pokemonov je veľmi chytré a všade nám ponúka ďalšie URL, cez ktoré sa dostaneme k ďalším dátam, treba k abilitám.