API: made easy! (part 2 of 2)

Hi there, glad you're back.

How did the first part work out for you? Good? GRRRREAT! Because today we will be exploring a couple of new concepts. Don't worry! It's mainly related to your first part.

We will be using JavaScript to handle the API.

Have you heard about JavaScript fetch?

However, how do I use it? Just, like the following:

1. Fetch data from a universal resource locator (URL).
2. Convert the data into a JSON object.
3. You have all that you need.

NOTE: In javaScript, we can define variables to be functions. I defined a function called app so that I can use it on whatever event inside my HTML code (otherwise, the code runs synchronously). You can fetch(URL) whenever you like. I, personally, like making it into a variable so I can have a cleaner code.

FIRST: FETCH

As stated in the concept above, fetch provides a request and a response object. For now, fetch is the request, and a response is a response! Wait! What does this mean? It means that fetch is an HTTP request which will return an object. Let's try to console.log(promise); We will see this:

So what this is telling us is that it returned a response. Now, we need to convert that response into a more accessible format (JSON format).

SECOND: CONVERT INTO JSON

Fetch returns a response, what we need to do right now is chain the fetch with something called then(). So to pass the response into a workable form, we attach a then to a fetch. See below:

The response, in this case, is passed to then() --> response contains the actual response. Now, we have the API data. Remember chaining? Now it's the time to chain one more time with a returned parameter which we will call JSON just like this:

THIRD: ALL IS GOOD

This is what we will see after console.logging the JSON parameter:

Technically, this is what is needed to deal with API data.

THE BONUS ROUND

The solution we will develop is that we will listen for the client input to search through the database and return the appropriate value.

First, we get the userInput (from the HTML), initialize a status variable, and a data array.

If the userInput is not empty, we write codes depending on the input type:

• If it's a '+' --> we should print all returned records from the database. If nothing returns, we set the status to be 'empty.'
• Else, we loop through the data with checking if it includes what is written (userInput), if it does include, we push the record into our data array and set the status to be true.
• If the userInput is nothing, we set the status to be 'reset.'

Then, we call a function called removeExistingNodes() and pass in data and status in which we get rid of the existing nodes in the HTML if any exists and then call initNodes(). If nothing exists, we call initNodes() with passing the data and the status.

After getting the DOM ready, we now should build the required nodes to contain the result.

First, we construct the correct node starting by the parent node (one node) and then children nodes (number of records matching the userInput).

BuildNodes is a function that is used just for keeping the code clean. The way we are listening for the user input is by using the HTML attribute onkeyup.

One last tip for UX designers: as soon as the page loads, we make the focus goes for the input (userInput) with the help of this function:

The end product looks like this (NOTE: I updated the database like this):

Thank you for tuning in. I hope you learned something new today.

Like usual, if you have anything to add, please feel welcome to write it down.

If you have any question, feel free to inbox me or post it as a comment. Remember, we learn by asking questions.

You are free to mention any web developer you know, junior or senior, we all like learning.

Thank you.