Using Fetch for an API call

When I began designing my web application, the first thing that I decided on was the desire to have cat photos front and center for anyone who uses the web application. Not only did I want a cat image, I wanted a variety of random cat images.

In this blog I will review how to create a simple fetch request to a public API that will allow you to add adorable cats to your webpage.

You can start in a few different places, but for me the most logical place to start was my HTML file and add a container within my body that will store my cat photo on the page:

Since the images were random,

I created a div “container-fluid”

to adjust the size of the container

as needed.

I then went about adding some CSS design elements to position the cat photos, add a border, and prevent the photos from being too large proportionate to other elements on the page.

lastly came the exciting part - a fetch request function! For this, it took just a little bit of googling to find that there is a fantastic API that can be used to generate random cat images - a new cat at every refresh, at http://api.thecatapi.com/v1/images/search.

My fetch request started with a function name “fetchCatImage”:

function fetchCatImage() {

}

From here, I created a value for the image:

function fetchCatImage() {

let image = document.getElementById(“cat-image”)

}

Now that I’ve pinpointed the element in my HTML file that i want to load a cat image into, I can now complete the fetch request. It starts with actually fetching the data from the API:

function fetchCatImage() {

let image = document.getElementById(“cat-image”)

fetch(‘http://api.thecatapi.com/v1/images/search’)

}

The way a fetch request works, is I send the fetch request and data is returned. Now I must tell the function what to do with that data:

function fetchCatImage() {

let image = document.getElementById(“cat-image”)

fetch(‘http://api.thecatapi.com/v1/images/search’)

.then(res => res.json())

}

This step might seem a bit confusing, but it’s not too complicated. “.then” just means, after I get that data back, then I want to do something with that “res” (response). The text on the other side of the “=>” is the function describing what I want done - I want that “res” to be made into JSON-formatted data.

the next step is to do something WITH that recently acquired JSON data:

function fetchCatImage() {

let image = document.getElementById(“cat-image”)

fetch(‘http://api.thecatapi.com/v1/images/search’)

.then(res => res.json())

.then(json => image.src = json[0].url)

}

That’s right - we want to source our image from the first image that comes up in the JSON data (this API only sends back one at a time, but always a new random one).

And just like that - we have our full fetch request and elements to beautifully present our users with a cute adorable freaking kitty cat!