Projectvoortgang

Het heeft me een week geduurd, maar ik ben er eindelijk in gelukt om de search bar functie te koppelen aan mijn staafdiagram.

Bevindingen:

Ik had veel moeite om deze twee componenten met elkaar te verbinden, vooral omdat ik geen visuele weergave op mijn pagina had. Na een grondige analyse van mijn API's vond ik al snel de oorzaak van het probleem.

Oplossing 1: Dubbel API-gebruik.

Om de gegevens van OnlineGameStore te matchen met mijn prijsinformatie, was het nodig om de StoreID te krijgen van de Stores Info API. Vervolgens moest ik deze ID matchen met de ID in de List of Deals. Deze stap was cruciaal om beide gegevenssets correct weer te geven in de grafiek en ervoor te zorgen dat ze accurate informatie gaven.

        // API URLs
        const dealsUrl = `https://www.cheapshark.com/api/1.0/deals?title=${activeGame.internalName}&exact`;
        const storesUrl = "https://www.cheapshark.com/api/1.0/stores";

        // Fetch API data
        const dealsData = await fetchApiData(dealsUrl);
        const storesData = await fetchApiData(storesUrl);
 
        let graphData = [];
        // Itereren door elk 'deal' object in de dealsData array
        for (let deal of dealsData) {
            // Zoekt naar de winkel in storesData die overeenkomt met de storeID van de huidige deal
            const store = storesData.find(s => s.storeID === deal.storeID);
            // Controleert of de overeenkomende winkel is gevonden
            if (store) {
                graphData.push({ storeName: store.storeName, price: parseFloat(deal.salePrice) }); // Voeg een object met winkelnaam en dealprijs aan de grafiek
                // parseFLoat is een string omzet in een floating-point getal (een getal met decimalen) om de price in een nieuw opject te zetten
            }
        }

Voor deze grafiek begon ik met het aanroepen van twee verschillende API's. Het doel was om essentiële informatie uit beide bronnen te verzamelen: de dealData en de StoreData. Na het ophalen van deze gegevens stond ik voor de uitdaging om de StoreID's van beide API's te koppelen. Ik deed dit door een strikte gelijkheidstest (===) te gebruiken, waarmee ik de juiste ID's aan de overeenkomstige winkels kon koppelen.

In het laatste deel moest ik de dealprijs, die als een tekenreeks werd geleverd, converteren naar een getal met decimalen met parseFloat. Dit object werd vervolgens toegevoegd aan de grafiek, die een effectieve en visueel duidelijke weergave gaf van gecombineerde gegevens uit verschillende bronnen.

Oplossing 2: Werkende Searchbar

Het maken van een zoekfunctie en het oproepen van een compoment was een essentiële stap om gebruikers eenvoudig games te laten vinden. De kern van deze functionaliteit was het invoeren van een dynamische zoekbalk, die live zoekresultaten genereert terwijl de gebruiker typt.

Eerst werd de List of Deals aangeroepen, die games zocht op basis van de invoer van de gebruiker. Dit laat ook meteen de top 10 resultaten zien.

async function searchGame() {
    const response = await fetch(searchApi + searchInput);
    const games = await response.json();
    searchedGameResults = games.slice(0, 10);
}

Bij het selecteren van een spel uit de zoekresultaten heb ik een functie geplaatst zodat het zoekvak gereset wordt en de gebruiker een nieuw spel kan selecteren of verder kan zoeken.

function onClickGame(game) {
    activeGame = null;
    activeGame = game;
    searchInput = '';
    searchGame();
}

In de resultatensectie van mijn project zorgt de code in het

De regel {#if activeGame} in mijn code is erg belangrijk. Wanneer ik een spel kies, toont deze regel dat spel met zijn titel, thumbnail en een barchart. Deze barchart toont de goedkoopste prijzen voor het spel dat ik heb geselecteerd. Dit maakt het makkelijker voor gebruikers omdat ze meteen alle belangrijke informatie zien over het spel dat ze selecteren.

<main>
    <input
        type="text"
        id="myInput"
        bind:value={searchInput}
        on:keydown={searchGame}
        placeholder="Search for names.."
    />

    <ul>
        {#each searchedGameResults as game}
            <div on:click={onClickGame(game)}>
                <li>{game.external}</li>
                <img src={game.thumb} alt={game.external} />
            </div>
        {/each}
    </ul>
    {#if activeGame}
        <h3>{activeGame.external}</h3>
        <img src={activeGame.thumb} alt={activeGame.external} />
        <Barcharttest2 bind:activeGame />
    {/if}
</main>

Bekende problemen

In eerste instantie was ik blij met wat ik had gemaakt, maar ik ontdekte al snel dat er een paar dingen mis waren met de barchart. Ten eerste werd niet altijd de laagste prijs voor elk spel weergegeven, wat natuurlijk belangrijk is.

Ook stonden de prijzen in de barchart niet op volgorde van goedkoop naar duur, maar op volgorde van StoreID. Dit maakte het moeilijk om snel de prijsverschillen te zien.

En als laatste probleem hadden sommige games de prijzen door elkaar staan, waardoor het moeilijk te lezen was. Ik wist dat ik deze dingen moest aanpakken om de barchart beter te maken.