Dog App: Using Javascript with an API
By: Teri Eyenike
Tags: API, JavaScript, Tutorial

Now that we have our HTML and CSS setup, it is time to set up our app.js in the directory of our project.

Connecting to the actual API

Let’s talk a look at the dogs ceo API and explore what it got to offer us as developers to enable us to retrieve its data and use it on the client-side of our app.

To get started, go to the list all breeds on the website documentation. It will show us the URL of our API endpoint. Clicking on the link will display the object of the dog types.

app.js

const BREEDS_URL = 'https://dog.ceo/api/breeds/list/all';



const select = document.querySelector('.breeds');



fetch(BREEDS_URL)

.then(res => {

return res.json();

})

.then(data => {

const breedsObject = data.message;

const breedsArray = Object.keys(breedsObject);

for (let i = 0; i < breedsArray.length; i++) {

const option = document.createElement('option');

option.value = breedsArray[i];

option.innerText = breedsArray[i];

select.appendChild(option);

}

console.log(breedsArray);

});



select.addEventListener('change', event => {

let url = `https://dog.ceo/api/breed/${event.target.value}/images/random`;

getDoggo(url);

});



const img = document.querySelector('.dog-img');

const spinner = document.querySelector('.spinner');



const getDoggo = url => {

spinner.classList.add('show');

img.classList.remove('show');

fetch(url)

.then(res => {

return res.json();

})

.then(data => {

img.src = data.message;

});

};



img.addEventListener('load', () => {

spinner.classList.remove('show');

img.classList.add('show');

});

The first thing we did here is to declare a variable to the API endpoint URL which is a constant because we don’t want it to change throughout the development.

Going back to our index.html, remember our select tag with the class of breeds. Here we would make sure we create a dropdown menu for users to select to change the current image with another.

Next thing to do is to extract the JSON body content from the response, we use the JSON() method which returns us a promise that resolves to the Response to that request with data from the endpoint.

A look at the endpoint from the list of breeds API

To make it easier working with the object, we can convert it into an array using Object.keys() to loop it starting at index 0.

Within the for loop, we can then create an option tag that would list out all the dog breeds from the API and then use the innerText and finally append it to the select tag to display results from the API.

To be able to change each image from the dropdown to display a new image, we need to add an event listener to the select tag from our index.html to individually change our option from the dropdown.

The last step of this tutorial is to create a function that when you select a name from the dropdown, it first has to load the spinner and remove the image displayed on the screen from our declaration in style.css. From here, it fetches the new image and removes the spinner and displays the new image as a block element in our web app.

Conclusion

Congratulations on going through this tutorial on using plain JavaScript to connect to an API using HTTP requests. Hopefully, you should have a better understanding and with this method, you can easily fetch and communicates with any public API to fetch its data to display on a website. We did all this without having to worry about anything like Node.js, installing a package(npm), webpack and so on.

This tutorial is just an easy step by step guide to follow and I hope to you found this useful. I am open to correction and feel free to share.