If you're a beginner to software engineering, like myself, it's very exciting to unlock all the potential that comes with accessing APIs. APIs (short for Application Programming Interface) allow two applications to talk to each other, letting us input data from an API into our websites. There's APIs for all kinds of fun information, including Pokémon, Star Wars, even the Real Housewives of New Jersey. (All these topics are important to our work of course.) But how do we access them?
Great question, me! To access APIs, we'll use a method in JavaScript called fetch().
Mean Girls was wrong. Fetch is a thing.
Fetch() fetches a resource from the API we ask it to and returns a promise which is fulfilled once the response is available. I promise you don't have to worry too much about what a promise is to do a GET fetch() request, so long as the method is called correctly. Just know that you can learn more about promises if you want to look at the other three ways that you can use fetch(). The simplest way to use fetch() is GET, which gets the data from an API and we will examine now.
But wait! To fetch() you need to use terminal to use a command to allow our computer to communicate with a server using the command:
json-server --watch db.json
JSON is a common data-interchange format used for APIs. For now, all we need to know is how to take that JSON data and return it in JavaScript, so that we can use it to populate API data in our webpages.
Now that our computer can communicate with an API, we can use the a fetch() request with GET to get the information on the API. To fetch() use the following syntax:
You might notice that the fetch() code didn't actually include the word, "GET" that's because a fetch() request that doesn't ask for a different method will automatically do a GET request.
Our particular use of the fetch() method would fetch the data from the API at the URL we passed through the method. In this case, it would fetch all of the memes from a meme API. (Something all employers, no doubt use.) Our code then would convert the response (all the API data) from JSON format to JavaScript, using the JSON() method.
The a sample of the JSON we are selecting would look like the following:
As you can see it has keys and values to provide us with details such as the name and url to images for memes. Now that we have used a GET request via fetch() we can add that data to our website to spice it up. We can populate our website with the values (names and images) from the API easily by selecting elements in our HTML to add the API details to by using methods such as document.querySelector() and changing the .innerText and .src of the elements of our HTML using Javascript. Like so:
With some simple coding and a GET request we can very quickly add a lot of interesting data to our website, bringing it from this husk:
To something full of information (and in our case memes!) that we can display however we would like:
So look for free APIs today and use GET with fetch() to start building out websites full of information quickly! Now if you'll excuse me, I'm off to build that Pokémon, Star Wars, and Real Housewives of New Jersey website...
Top comments (0)