DevDiary

Get Data From API and Display

"Multiple Asynchronous Calls" Example

I recently discovered "https://getpantry.cloud/" a free API for developers who want to store some JSON data for their projects.

I created an account/key, created some mock data (a list of movies) and looked through the documentation.

This examples details how to get data from the API and display it.

It involves handling multiple asynchronous calls and ensuring that the data is presented in the correct order even though the responses are resolved in a non-deterministic order.

HTML Body

Container

All this HTML page contains ,in the body, is a heading and an empty div element.

The empty div element also has an id of "container".

The JavaScript will update this elements innerHTML once it gets the data from an API.

Async Function 1

Get API Data

Before the function two varibles are set up. One for the empty div (container) and a variable to act as a counter.

This function makes a GET request to an API.

The "baskets" length is the number of records that this "pantry" holds. In this case, 3.

A 2D array with the dimensions 3x4 is then created.

A for loop is used to get the id of each record and it is passed to the next function.

In this case, the loop calls the function 3 times and passes 4 parameters -

dataNo1 = the Id of the record.

arr = the empty 3x4 array.

j = the loop varible.

resLength = the number of records to get.

Async Function 2

Get API Data and Display It

The Id for each of the records is added to the URL of the GET request.

The counter is incremented.

The loop variable j is used to make sure the data from the API is loaded to the apropriate row, of the 2D array.

When the counter variable is equal to the total number of requested records (3), it means that the array is complete.

Using a for-loop, the innerHTML of the empty div is updated with contents of the array.

The screenshots below shows the data contained in the array.

It also shows the HTML which is rendered.

Note that the records are ordered according to their Id's (1, 2, 3).

These three asynchronous calls are made and get resolved at different times. This is shown in the console. Using the passed loop varible j ensures that the rows are entered in the correct order and the if loop makes sure the data is not presented until the array contains all of the data.

Data Returned from API

Rendered HTML

API Data Loaded to Array

Using Console to Display Contents of Array

Order of Responses are Non-Deterministic

Order of Responses are Non-Deterministic

Added Form (CRUD)

Form HTML

Get Form Data

Create/Update Button Clicked

The Id, Date, Name and Platform parameters are loaded from the form to these variables.

Then the data is passed to the saveToAPI function.

If the Id already exists, it overwrites the data, else it creates a new record.

Once the resource is created/updated the getAPIData function is called again but after 600ms, giving the API some time to update.

Post Data To API (1)

Post Data to API (2)

Delete Data (1)

Delete Data (2)

The delete function is very similar to the "Post Data To API" function.

All the delete function needs is the Id.

Populate Form (1)

Added Same Class Attribute To Row

I added a class attribute to each element in the row and used the id from the API data to create a unique class name for the entire row.

If there are three rows, for the first row the elements would have the class "input1", the second row would have the class "input2" and so on.

Populate Form (2)

Added onclick="fillForm(id)"

I added an onclick attribute to the first element in each row.

It triggers the function which gets the data in the row and populates the form.

It also passes the id to the function.

Populate Form (3)

fillForm(id)

I used the id to get the row that I want to target.

Then I loaded the data to the from fields.

So if the user clicks on the id, the data for the row populates in the form fields.

This makes it easier to "update" the data for a specific record.

Reset Form

Reset Button (onclick="resetForm()")

If the user clicks on the reset button, any data typed into the form fields, get set to blank.