Using Fetch With An API

The fetch() method in JavaScript is a very useful tool. Most of the major websites that you use on a regular basis use this method to request information from a particular Uniform Resource Locator, commonly referred to as a URL.

In this post I will demonstrate how to use the fetch method to get information from a GitHub API. An API (Application Programming Interface) is a link that allows two applications to talk to each other. Below is an example of what an API file looks like.

For the purpose of this demonstration I am using an HTML page that has a text input bar and submit button.

When you enter a username into the text input bar and click submit the users are displayed on the HTML page. On the back end, the fetch method is reaching out to the API for the username that matched with the input text.

In the below image I am using the document.querySelector to grab the form. Then I set up an EventListener so that when the user clicks the submit button the EventListener is called and in turn the next function is called. This next function will use the fetch method to call the API.

Note: I inserted event.preventDefault() so that when you click the submit button it does not refresh the page. By inserting this after the EventListener in JavaScript, you are able to prevent the page from refreshing automatically once that EventListener is called.

Now that the EventListener was triggered, the next function takes place and this is where we will implement our fetch(). In the below image, there are a few lines of code before the fetch is called. These lines are removing the old results if someone had already done a search.

I am using the GitHub URL `https://api.github.com/search/users?q=${input.value}`. At the end I implemented ${input.value} so that the fetch call specifically searches for the input value that was entered into the text input bar.

After you call for the fetch you are given a promise. In simple terms, the fetch is telling you that it promises to send back a response from the URL.

Next we implement the first .then(). This takes the file that you receive back from the fetch and converts it into a json file so that your code can read it.

The data passes through the second .then() and is sent through another method. Here I am taking that data and putting it through a forEach() method and sending it to a function where I can then implement that users data on to my HTML page. Note: the forEach() method executes a provided function once for each array element that passes through it.

Now that we have ran our data through the forEach() method it is time to add the results to the HTML page. Here we set up variables for the elements that we want to grab from the existing HTML and variables for the elements we need to create. We are grabbing the HTML current ul using the id=”user-list” and appended some new elements to that ul. I created an li and appended that to the current ul. Then I created an image for the users avatar and appended that to the li. Next I created a p element for the users username and appended that to the li. I also created a new button and appended it to the ul so that you could get the users repos. Once that button is clicked it goes into another function that displays the users repos.

That right there is a breakdown of how you can use the fetch() method and an API to add information from the API to your HTML page.