What is a web API
What the FakeJSON API has to offer
How to use the FakeJSON response to create and display HTML elements
Finished Tutorial Product with FakeJSON
FakeJSON can create avatars using awesome Robo Hash service.
Finished Tutorial Product without FakeJSON
An API (Application Programming Interface) is the way a certain piece of software communicates to another piece of software. It is sort of like the command centre for the software, with the ultimate goal of making it easy for anyone to program with it.
A web API is really just one of many types of APIs. It is an API intended for access over the web using HTTP protocols. There would also be a defined response structure depending on the HTTP request. Put simply, a web API defines what can be expected when making a HTTP request. For this tutorial, we’ll be using the FakeJSON web API to make a HTTP POST request to a URL endpoint which will return us fake data in JSON format.
What can you do with FakeJSON API?
Tons (or less than tons depending on your subscription plan). You can:
Fake your backend as you work on your front end functionality – use HTTP methods, receive specific response status codes, incorporate delays, specify custom headers, utilize broken strings
Generate all types of fake test data using predefined or custom fields based on the format and name of your choice
Utilize resources through the saved resources feature – save your favorite API requests and reuse them easily
We will be creating an employee page with a fake user avatar, a fake first name, a believable but made up job title and a short nickname for the employee. Each made up employee will be displayed as a card in a simple grid format.
The CSS file (called style.css) contains a bunch of different styling and design stuff. You don’t really need it to display the FakeJSON data. They just look nicer with them in it.
The rest of the tutorial will be focused on creating the
How to connect to the FakeJSON API
Obtaining your token
The first thing we’ll do is to obtain the FakeJSON token. This token is unique to your account and authorizes your usage of the API. If you don’t already have a token, you can get one easily by signing up here
Selecting the API endpoint
Every API request to FakeJSON will be directed to the FakeJSON API endpoint,
app.fakejson.com/q. You have the flexibility of
choosing either http://app.fakejson.com/q or
https://app.fakejson.com/q depending on your use case.
Making a HTTP POST request
The HTTP request defines the response from the API. In our
case, it specifies the fake data we would like to receive.
Let’s start by connecting to the FakeJSON API. We’ll be using
XMLHttpRequest objects, a way for us to interact with the FakeJSON server. We’ll be making a request for 9 array elements, each containing first names (titled nameFirst), an avatar (titled personAvatar), job titles (titled jobTitle) and nicknames (titled nickName). I’ve named these titles arbitrarily. You are free to name them however you like. However, you would have to follow the format of the fields based off the API documentation.
Creating a variable that stores the request payload following the FakeJSON request structure
Creating a variable that stores the XMLHttpRequest object
Initializing the request – specifying that the request is a POST and adding the URL endpoint
Sending the request along with the payload
Accessing the JSON response generated from the request
Using the generated JSON response
If your subscription plan includes HTTP status codes, you can even add support in your code for status code handling. 200s are successful requests whereas 400s or 500s are generally caused by some type of error.
To deal with erors, we’ll just wrap the code in a simple if statement. The code will proceed with its execution if the status code falls between 200 and 400 or will output a message to the console if the if statement fails.
Here’s what we have so far. The code with error handling.
The code without error handling.
Recap. We’ve successfully made a HTTP POST request containing data payload to the FakeJSON API endpoint, which returned us fake data as specified in JSON format.
Render JSON as HTML
This section involves using the data we’ve retrieved and displaying it as a web page. This is where the index.html file comes into play. We’ll be selecting and displaying things as HTML through the <div id=”root> element.
We’ll be accessing the <div id=”root> using getElementByID() in the scripts.js file. This method allows us to quickly access a uniquely named element on the page. We’ll then create a div element, containing a class attribute with the value of “container” using the setAttribute() method. Once that is done, we can now add the div class “container” to the div id “root” using the appendChild() method.
Now that we’ve established the link between the index.html file and the scripts.js file, it’s time to move on to creating and populating the cards to be displayed. We’ll do this by using the code block that was part of the if statement we created earlier. Instead of printing out successful messages using console.log, we’ll be creating a card using a combination of div, img, heading and paragraph elements.
Here’s the other full scripts.js file without the condition for status code checking.
Refresh the browser page containing the index.html. Voila, cards with the FakeJSON data.
You’ve successfully connected to the FakeJSON API using a POST request, specified the type of data response you’d like from the API URL endpoint and finally, displayed the data onto the screen. I hope this tutorial has been helpful to you in learning and using APIs as it has been to me researching and writing it.