Displaying Data from an API with Javascript — Tutorial

4 min readFeb 6, 2021

Intro

As a developer, having the ability to use APIs to retrieve data and use it in your own web applications is a must nowadays.

In this tutorial, we’ll use a very simple API (https://icanhazdadjoke.com/) to get a random dad joke and display it on our website.

Overview

What is an API?

API is the acronym for Application Programming Interface. Is a software intermediary that helps two applications communicate. You probably already heard about the CRUD concept: Create, Retrieve, Update and Delete.

Web APIs applies those concepts with the HTTP verbs:

Create -> POST -> Creates a new resource

Retrieve -> GET -> Retrieves a resource

Update -> PUT/PATCH -> Updates a resource

Delete -> DELETE -> Deletes a resource

Our goal

Our goal is to have a very simple page with a button that adds a joke every time it’s clicked.

In the end, it’ll look like this:

The basic structure of our project will have only 3 files:

index.html
app.css
app.js

You can use any text editor to create those files, I recommend using Visual Studio Code for a light but powerful source code editor.

The first file is just a basic HTML structure:

Important details:

line 7: link to the CSS file, for styling the page
line 11: button element
line 12: unordered list element
line 14: link to Axios file (more details below)
line 15: link to the JavaScript file, where our main work is
Remember, all files must be in the same directory

The CSS file applies some style to our page to make it look better:

Note that, starting on line 21, we already set the style for the LI elements that will be added in the future by our app.

Finally, let’s work on the JavaScript file.

Firstly, we’ll use the query selector method to capture our HTML button and store it in a constant:

Now, let’s work on the main function, which is going to be an event listener:

Using the button constant we just created, we use the addEventListener method passing ‘click’ as one argument, and the async function as the other, so every time the button is clicked, the function will be executed.

The reason we use the async function is that it will always return a value. Using async simply implies that a promise will be returned, and if a promise is not returned, JavaScript automatically wraps it in a resolved promise with its value.

According to the API documentation (https://icanhazdadjoke.com/api), to get a JSON response, we should pass as an accept header the value ‘application/json’. So we’ll store it, as a JavaScript object in a constant named option:

With that, we’re able to catch the response in a constant. we’ll use the Axios script we import on line 14 of the HTML. For that, the method used is ‘get’, and as arguments, we pass the API’s endpoint end the option constant created above.