Understanding APIs using JSONplaceholder

Charles
5 min readApr 7, 2022

--

Sometimes climbing the web development ladder can be hard. It always feels like there is a new word you hear every other day.

Now you are hearing about APIs again. This is leaving you wondering, ‘What the hell are APIs?’.

Sigh. I understand your frustration.

As a web developer, understanding APIs is very crucial. We interact with data every day and it is good to know how to get this data.

In this article, I will be explaining what an API is and using JSONplaceholder to show the use of an API.

What are APIs?

Application Programming Interface(API) is a tool that allows your program to talk with other applications. Yea I know this doesn’t do justice to make you understand what an API is.

Let’s further break this down with an example. Imagine you were living in ancient times and you are the leader of a kingdom. Something important comes up and you need to send a message to a neighbouring kingdom. You send your royal messenger to that kingdom with your message, expecting a reply. Three days later, the messenger returns. He brings you the message from the other kingdom.

In the example above, the messenger above is the API.

We can now see that an API is a means of sending information to and fro. Yea, it’s that simple.

So, whenever you send the messenger to the other kingdom, you are making an “API request”.

A real-life example would be clicking the favourites Tab to see all your favourite tweets. When you click that Tab, the Twitter app sends a request to the API asking for your favourite tweets.

What are API requests and endpoints?

In simple terms, An API request is sending a message to the server asking for something in return. API requests are usually done through endpoints.

In simple terms, endpoints are the “routes” to get specific information. These routes are URLs we put in our browsers. Most routes will consist of the name of the website followed by a “path”.

For example, let’s say the name of the website is “https://yippy.com”. Now let’s say a path is “/west” and another is “/east”. This would give us “https://yippy.com/west” or “https://yippy.com/east”. This is are what we call endpoints.

Each endpoint would give us a different type of response.

Let’s go back to our royal analogy. Imagine the different endpoints to be different neighbouring kingdoms. When you send messages/requests to these kingdoms you get a different response from each. Why because they are different endpoints.

What are API request methods?

Let’s give one of the kingdoms a name. We give it “Dumasa”.

Depending on what information you want, you will tell your messenger to do a different thing. You can tell them to scout the area or check if they are planning a war.

We can see that API request methods are the actions taken when you send a message/request. We have four major ones:

  • GET: for getting information from the endpoint
  • POST: making/creating data at that endpoint.
  • PUT: used to update the data we made.
  • DELETE: used to delete the data we made.

With all this knowledge we are going to do practicals using JSONplaceholder.

What is JSONplaceholder?

JSONplaceholder is a simple and free fake API. It has different endpoints that give us fake posts, todos, comments etc.

If you need a fake API to play around with, you should check it out.

Now to the juicy part.

Endpoints inJSONplaceholder’s API

For this section, it is good you to download Postman so you can follow along. Don’t worry you don’t need to sign up to use it. Shhhhhh. It’s free.

In JSONplaceholder, there are 8 endpoints. The URL we are going to be using is https://jsonplaceholder.typicode.com.

  1. GET /posts

In the input, you would type https://jsonplaceholder.typicode.com/posts.

Click on Send. In the Body section below it, this should come up.

2. GET /posts/{post_id}

In the input type https://jsonplaceholder.typicode.com/posts/2. You can put any number of your choice between 1 to 60.

Click on Send. In the Body section below it, this should come up.

3. GET /posts/{post_id}/comments

In the input type https://jsonplaceholder.typicode.com/posts/2/comments.

Click send. This would generate this result:

4. GET /comments?postId={post-id}

In the input type https://jsonplaceholder.typicode.com/comments?postId=2. Click send. This should output:

5. POST /posts

Change the method type to “POST”. Then in the input type https://jsonplaceholder.typicode.com/posts.

Below the URL input, click the “Body” tab. Then click on “x-www-form-urlencoded”.

You would see a section with “Key” and “Value”. Put in the following information.

Click send. This should output:

6. PUT /posts/{post-id}

Change the method type to “PUT”. Then in the input type https://jsonplaceholder.typicode.com/posts/3.

In the “Key and Value” area, put in the following information:

Click send. This should output:

7. PATCH /posts/{post-id}

Change the method type to “PATCH”. Then in the input type https://jsonplaceholder.typicode.com/posts/3.

In the “Key and Value” area, uncheck all the keys except “title”.

Click send. This should output:

8. DELETE /posts/{post-id}

Change the method type to “DELETE”. Then in the input type https://jsonplaceholder.typicode.com/posts/4. Click send. This should output:

That’s all.

Now you know how to work with APIs. Yaaaaaay.

--

--