How to use an API with JavaScript

In this article, we are going to get some data from the Google Books API and show it on our website.

Photo by Emile Perron on Unsplash

Hello! My name is Markus Urban.

In the last days, I’ve been working with different API’s, and it was quite difficult for me to find a great tutorial about using REST API’s and accessing it’s JSON response.

In this tutorial, we are going to try to get some information from the Google Books API and display it on our website.

You can follow this project step by step or, if you only want to know how to make an API request, you can go to the end of this article to see the code JavaScript code that you need.

Are you ready? Let’s start!

FIRST STEPS

First, we are going to create a simple website where we are going to display the data that we get from the Google Books API.

I’ve created a website that I named “Bookify” with some HTML and CSS code.

The page has an input field and some cards where we will show the search results

The user is going to be able to search for a book and see who its author is.

The webpage has a form with an input where the user can write the title of a book.

When he clicks the ENTER keyboard, a JavaScript function is going to execute.

The form where the user can write the title of a book

You can download the code here or skip this step and add the JavaScript code that we are going to see in the next part of your existing website.

TIME TO ADD SOME JAVASCRIPT!

For now, our website doesn’t have JavaScript code. Let’s change that by creating a new file called script.js, where we are going to add some code to get information from the Google Books API.

Before we start adding code to this file, let’s connect it with our existing website:

We connect the new file that we just created with our index.html file

Well, the time has come!

Let’s start coding some JavaScript!

GETTING THE USER INPUT

When the user clicks ENTER, the search() function is going to run.

Let’s create that function!

We create the search() function

To begin, we are going to get the text that the user wrote on the input field.

Inside the search() function, let’s create a variable named user_input.

We create a new variable called user_input

The user_input variable will get the user input using the input field id:

We get the value that the user wrote on the input field

Now let’s continue creating the API request link.

CREATING THE REQUEST LINK

When we make an API request, we use an URL where we specify the parameters.

In our case, the base URL is the following:
https://www.googleapis.com/auth/books

If you try to open it, you will see the following:

We made our first API call!

It worked! In fact, we made our first API call!

Below the user_input variable, let’s create a new one called request_link:

We create a new variable called request_link

As you might know, we need to specify some parameters to make a successful request, such as the title of the book that the user wants to search.

Here we have an example of the final URL that we are going to use:
https://www.googleapis.com/books/v1/volumes?q=sherlock+holmes

That would be the URL if the user entered sherlock holmes on the input field

As you can see, the words that we want to search go after the q sign (it’s an abbreviation for query).

Also, spaces have been replaced with plus signs.

Let’s see the result that we get with this URL!

Oh! That’s a lot of information!

Hurray! Let’s try to change the search query and try again.
https://www.googleapis.com/books/v1/volumes?q=programming

We found a lot of programming books!

It works!

To build a successful request, we need to create an URL like the ones we just saw.

To do so, let’s add to our request_link variable the base URL that we have seen:

We defined the request_link variable

Now, let’s actualize the user_input variable to replace all the spaces with plus signs:

We replace the spaces from the user_input variable with plus signs

And now we are ready! Let’s join all this in a new variable called url:

We define a new variable called url

In the next part, we are going to do an API call! Let’s start!

MAKING AN API CALL

It’s time to make a request to the API with the URL that we just crafted.

There are lots of different ways to do that, but we are going to use the XMLHttpRequest method.

Let’s start by creating a new request:

We create a new request

Now it’s time to define our request type:

We want to get information, so our request is a GET request

To finish, we are going to send our request:

We send our request using request.send()

Now, we must wait until we receive a response from the API. To do so, we need to define a function like the following:

The function is going to execute when we get the API response

When we receive the response, we are going to check if it’s valid using its response code:

We save the response in a variable called results

After that, let’s save the response into a new variable called results:

The response is now in text format. To convert it into a JSON object, we are going to use the JSON.parse() function:

We convert the results into a JSON object

For now, we are going to see the results by printing them on the console:

We print the results on the browser’s console

Well, let’s try it! Enter some text on the input field, press ENTER, and open the console to see the results!

To open the browser’s console, press F12 on Chrome & Safari or CTRL + SHIFT + K in Firefox

You are going to see something like that:

Our example result, in JSON

Fantastic! If you’ve done correctly all the steps that we have seen, you’ll get a response like the one that we received.

In the next part of our article, we are going to analyze the JSON response, and we are going to extract the information that we want to show on our webpage.

ANALYZING THE JSON RESPONSE

Analyzing JSON objects isn’t complicated. Here you can see an example that I’ve taken from W3Schools:

The myObj variable is a JSON object

As you can see, if we provide the element name, we can get its value.

Now let’s see how our response looks like:

An example response from the Google Books API

There’s a lot of information here! Well, we are only going to use the first three books on the list. You can understand what I mean by looking at the following image:

Also, from each element, we only are going to use the title and the author of the book.

In this case, there is more than an author

Let’s start saving them into variables! First, we are going to create the variables that we need to save the title and the author of the first three books on the list.

You could also do that by creating a loop and using the eval() function, or creating a JavaScript object, but we are going to make it as easier as possible

We initialize the variables that we need

Now it’s time to define these variables!

We are going to start with the author of the first book on the list.

To get the author of the first book, we must get the first book on the list.

As you possibly know, the JavaScript lists start from zero, so the first book of the list will be the following:

results.items[0]

If you try to show the first book on the browser’s console, you will see something like this:

To print it on the console, replace the console.log(results) with the statement we just saw: console.log(results.items[0])

This is the first book on the list

Now, we have all the information about the first book on the list. But, where are the title and the author?

If you take a closer look, you will see that they are inside another object called volumeInfo. Let’s print it on the console!

To do that, we are going to change the console.log(), specifying the object we want to show:

results.items[0].volumeInfo

The result is going to be something like the following image:

Here we can see the volumeInfo object, that contains the title and the authors

Now we are going to save the title and the authors of the first book:

We save the authors and the title of the first book

Did you guess how to get the information from the other books?

We save the titles and the authors of the first three books on the list

Hurray! We have now all the information that we need into variables!

Let’s see if we have done it well by printing them on the console:

console.log(title_1);
console.log(title_2);
console.log(title_3);
console.log(author_1);
console.log(author_2);
console.log(author_3);

If you’ve done it all correctly, you are going to see something like the following:

An example result

Now, the last step is to show this information on our webpage.

Let’s do that!

FINAL STEPS

To set the information in our HTML code, we are going to use the ID’s from the HTML components.

As you can see, we already set some ID’s for the labels that we want to replace with the information that we found:

The variable names and the ID’s are the same (to do it simpler)

Let’s use document.getElementById to set the variable information in HTML paragraphs:

We just set the first author!

Let’s make that with all the information that we collected!

We set the content of the HTML paragraphs to the information of our variables

And we are done!

Let’s try it and see the final result!

The results if we search learn german

We finished our project! Congratulations!

WHAT’S NEXT?

We have seen how to make an API call and show it’s response on an HTML website.

Well, there are a lot of things that, if you want, you can do:

• Make the BUY NOW button work

HINT: The API response contains a link to the buying page

• Make the cards disappear until they have the information

HINT: You can modify all the cards at once in the CSS file. CSS properties can also be changed with JavaScript using component.style.property = value

• You could also create a skeleton loader that appears while we get the information

HINT: Here you can see how to make a basic skeleton loader: https://www.geeksforgeeks.org/how-to-create-skeleton-screen-loading-effect-using-css/

• To finish, you could also replace the book icon with its cover image

HINT: The API response contains an URL to the cover image in different sizes

COMPLETE JAVASCRIPT CODE

DOWNLOAD THE FINAL PROJECT

https://drive.google.com/file/d/1_1TVw48mdlgJ9mLsexvY3h1PcPxm3KME/view?usp=sharing

That's all for now!

Thank you very much for reading this article.

I hope you had fun coding and learning new things.

If you liked this article, I will be very happy if you leave a clap. 👏

If you have any suggestions or questions, leave them in the comments

See you soon in a new article,

Markus