CODEWITHSUNDEEP
javascriptapixmlhttprequestsingle-page-applicationcrud
sammysahrd
sammysahrd

Reputation: 29

Single Page Application Rest API Client

I need to create an SPA for an API where the user can search for content within the API, the given API is the Victoria and Albert museum one. I've done a lot of research but I am struggling to make sense of what I am reading. I need to use HTML, CSS and Javascript with absolutely no frameworks or libraries. I dont suppose anyone knows of any example web pages similar to my task, or if you know of any articles/tutorials which can help me gain a better understanding of my task. I understand the concept of it but my javascript is weak which I think is what's holding me back.

Thanks in advance!

Upvotes: 2

Views: 906

Answers (1)

Pedro Henrique
Pedro Henrique

Reputation: 141

Okay, I created an example that hopefully can help you. First of all this is the (pretty simple) html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Request</title>
    <script src="./app.js" defer></script>
</head>
<body>
    <input type="text" name="search" id="search-input">
    <span id="response-container" ></span>
</body>
</html>

Then we need our JS code to manipulate. Pay special attention on fetchAPIData() function since it is the core of your question. I commented the code since you are not used to JS (as you affirmed).

// First you need to "get" the object that is going emit
// events every time the user press a key 
const searchInput = document.getElementById('search-input');
const responseContainer = document.getElementById('response-container');


// Here we attach to the search input an event so every time he
// presses a key on his keyboard we ask our api some data calling
// the fetchAPIData function
searchInput.addEventListener('keydown', updateSearchTerm);
// Using keyup event is a work around to ignore backspace key
// and other keys we don't want to have in our search term. I avoided to use
// REGEX here since it can be quite scary for beginners.
searchInput.addEventListener('keyup', updateSearchTerm);

function updateSearchTerm(e) {
    const searchTerm = searchInput.value;
    if (e.type === 'keyup') {
        fetchAPIData(searchTerm);
    }
}

function fetchAPIData(searchTerm) {

    if(searchTerm === '') {
        return;
    }

    // I'm going to use PokeAPI just for the sake of example
    const APIURL = `https://pokeapi.co/api/v2/pokemon/${searchTerm}`;

    // fetch() is a JS built in function to deal with http requests for ya.
    // Although it deals with promises (kinda of an advanced topic)
    // we can make our code look very syncronous
    // using .then() function when http response is good and 
    // .catch() when http response is bad (in this case we just clean our response placeholder)
    fetch(APIURL)
    .then(response => response.json())
    .then(responseObject => {
        // responseObject['species']['name'] and responseObject['sprites']['front_default']
        // comes from our json response
        const pokemonName = responseObject['species']['name'];
        const pokemonFrontPicture = responseObject['sprites']['front_default'];

        responseContainer.innerHTML = `
            <p>${pokemonName}</p>
            <img src="${pokemonFrontPicture}" alt="${pokemonName} front sprite">
        `;
    }).catch(() => {
        responseContainer.innerHTML = `
            <p></p>
            <img>
        `;
    })
}

This is the final result (it calls the API and responds with the inputed pokemon info):

enter image description here

Hope it was helpful! :)

Upvotes: 3

Related Questions