How to Retrieve Data from an API

Hello everybody, today I would like to talk about one of the most, if not the most important (in my opinion) thing about web programming, and that thing is communication with a server. The most popular websites today use some form of process to request data and update the webpage without reloading, and that process is called AJAX, or "asynchronous JavaScript and XML". An example of AJAX would be like Instagram requesting data from their server and receiving data about the hottest new posts, then sending you a prompt to "Click to View New Posts" so you can view the posts without you having to click refresh to check for the new posts yourself. This makes it so much easier to browse and view new content on the internet because the page stays updated itself and you don't have to spend any time loading or reloading it.

One way to request data from a server using JavaScript that I've learned so far is:

fetch()

This is a function that retrieves data, and is then paired with then() to use the data, this is how you would use fetch():

fetch('url')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    \\ This logs the retrieved data into the console.
  })

Let's walk through a very basic way of using fetch() together one time. First, let's go to Mixed Analytics to view their list of free and public API's (Application Programming Interface). An API basically allows you to send and receive data from a server. For this walkthrough, I'm going to use #3 on the list, Nager.Date for their API on public holidays. Now, for this next step, you can do this from almost every website but for this example let's do it here. Here's what we need to do to get started:

1. Right click on this page and click "Inspect"
2. Click on "Console" on the new window at the top right
3. Type this into the console to clear all the of messages: console.clear()

With a clear console we are now ready to fetch data from our API. Next, we want to retrieve and view data from our API, and we would do it like this:

fetch('https://date.nager.at/api/v2/publicholidays/2020/US')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })

Copy and paste this into the console. You will now see the data that has been logged in the form of an array. This array consists of all the public holidays in the US according to the data from the API. But, let's do more than just view the data, let's use it. Look at this updated code:

fetch('https://date.nager.at/api/v2/publicholidays/2020/US')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    console.log(`There are ${data.length} public holidays in the US.`);
  })

I've added another line to be logged in the console, but this time the length of the array of data is being called, which in this case is the total amount of holidays retrieved from the data. Finally, if you paste this into the console you will see that it will return a message saying "There are 12 public holidays in the US".

There are four main actions an API can take, and those are:

GET - request data from server
POST - send changes from user to server
PUT - revises or adds to existing information on the server
DELETE - deletes existing data from the server

The combination of these four actions make up some of the most powerful communication tools on the internet. Whether it comes to checking the weather, booking a flight, or choosing an alternate payment method (like PayPal or Apple Pay), an API will have to be used to communicate data from the user to the server. A server has stored all the data that you need to access and you (the user) will send a request to communicate with it, which will then allow you to view what the weather is like in your area, view the time and cost of flights, and also allow you to continue to pay and ship a product to your doorstep using a third party payment method.

Our example of fetching data from an API is a relatively small request of data. An API is capable of sending an enormous amount of data that can be too much to process for the average internet user at times. Being able to write code to navigate an API and the ability to break down a huge amount of data and make it user-friendly is almost like building a virtual bridge to allow people around the world to cross over and access a new area of the internet.

In conclusion, using JavaScript to retrieve and use data is a very powerful tool. We can fetch data at the click of a button and have new information or amusing content displayed to us immediately. This tool makes the internet a much more captivating space, and I hope I helped you understand a bit more of how it actually works behind the scenes with this post.