JavaScript is a very powerful programming language that is consistently used with HTML in web programming. One of the many things that you can do with JavaScript is that you can Fetch API Results from their respective endpoints. In this walkthrough, you are going to learn how to extract Rick and Morty data from an API and display it on an HTML page.
To Start
First, we will want to create a quick project file that includes an index.js file and an index.html file.
index.html
You will want to have this boilerplate HTML code in your index.html file:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>Rick and Morty Data</title> <script src=’index.js’ defer></script> </head> <body> <div id=’rick-and-morty-characters’></div> </body></html>
In this HTML boilerplate setup, we are including the usual elements plus a div element (#rick-and-morty-characters), which will be where our Rick and Morty data will be displayed.
index.js
Next, we will create an index.js file that is left blank for now.
Reading the Rick and Morty API Documentation
We will be using the ‘Rick and Morty API’. In the documentation, we will want to read the character section, and will specifically want to Get All Characters. In our exercise, we will be pulling a handful Rick and Morty characters from the API using the following endpoint: ‘https://rickandmortyapi.com/api/character/’. In the API documentation, you will see that the Get All Characters JSON response is the following:
{ "info": { "count": 394, "pages": 20, "next": "https://rickandmortyapi.com/api/character/?page=2", "prev": "" }, "results": [ { "id": 1, "name": "Rick Sanchez", "status": "Alive", "species": "Human", "type": "", "gender": "Male", "origin": { "name": "Earth", "url": "https://rickandmortyapi.com/api/location/1" }, "location": { "name": "Earth", "url": "https://rickandmortyapi.com/api/location/20" }, "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg", "episode": [ "https://rickandmortyapi.com/api/episode/1", "https://rickandmortyapi.com/api/episode/2", // ... ], "url": "https://rickandmortyapi.com/api/character/1", "created": "2017-11-04T18:48:46.250Z" }, // ... ]}
In our exercise, we won’t worry about pagination, but will instead grab the first page of results and will display that to the HTML page.
JavaScript Fetch
JavaScript Fetch is JavaScript’s way of sending network requests. A rough description of the syntax is that it is: ‘let promise = fetch(url, [options]);’, where the url is the url that is receiving the request and options are the options parameters that may be added (headers, body/payload, etc…). Fetch can be a little confusing in that it returns a promise, which contains the response; as a result, we will need to utilize ‘.then()’ to handle the promise.
Getting Starting on the Code
Now that we have everything set up, let’s start with the fun part, the code! We are going to move to our index.js file and are going to enter the following code in:
fetch(‘https://rickandmortyapi.com/api/character/’) .then(response => response.json()) .then(characters => showCharacters(characters.results));
This is our basic fetch request, which sends a GET request to the Rick and Morty API and then takes the JSON response and runs our showCharacters function (we will create this next, will display data on the HTML page) with the JSON response ‘results’ property as an input.
Let’s now figure out how to get the fetch request to display the Rick and Morty character names in the Rick and Morty characters div on our HTML page.
showCharacters = characters => { const charactersDiv = document.querySelector(‘#rick-and-morty- characters’); characters.forEach(character => { const characterElement = document.createElement(‘p’); characterElement.innerText = `Character Name: ${character.name}`; charactersDiv.append(characterElement); });}
Opening and Checking HTML Page
We will now open a server up and test our HTML page to make sure it’s displaying the Rick and Morty characters data in the div. I am going to do this using lite-server; therefore, I am going to open up a terminal and navigate to the directory where my index.html file is at and I will run the following command: ‘lite-server’. I will then be given a localhost url where my HTML page is displayed.
We are successful! As you can see the HTML page is rendering the first page of data from the Rick and Morty Get All Characters endpoint.
Conclusion
As you have learned, Fetch is very powerful and very easy to use in conjunction with HTML. You are able to set up an HTML page that is seeded with data from an API.
Happy Coding!
