Phase 1 - Fetch
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!
