Custom Data Type with API

Let's say you're building an airline app that fetches passenger data from an API in JSON format. You have two options: 1) manually extract values using JSON path expressions and use them directly, or 2) extract and store values in custom data type and then use them.

The first option is prone to errors, requires manual type conversions, and can lead to unexpected behavior. Instead, the best practice is to use the second option as it provides you with the type safety.

Type Safety: Variables like app state or page state have specific types like integers or strings. Once defined, they can only hold values of the same type. For example, an "age" variable of type integer can't store words like "twenty-six"; it only accepts a value 26.

Type safety helps prevent mistakes. It tells you if you're trying to do something that doesn't make sense, like adding a number and a word. Learn more about type safety here.

Converting a single JSON object into a custom data type

Let's see how you can convert a JSON object that looks like the below to the custom data type named 'passenger' and then display the values on UI.

{
  "_id": "6465fe85b149ab5cc6352c32",
  "name": "Anupamaa",
  "trips": 435,
}

Here's how it looks when completed.

Custom Data Type with API

The idea here is to create a custom data type representing the JSON structure and then map the JSON values to the custom data type field using the Update App State action. Later, you can access the data from the custom data type to display the values.

Here are the step-by-step instructions:

1. Create a custom data type with the name 'passenger'.

   

   Creating data type
2. Create an App or Page state variable with the data type 'passenger'.

   

   App state variable
3. Make an API call to get the specific passenger details. To try this out quickly, you can use the following API from here.

   https://api.instantwebtools.net/v1/passenger/6465fe85b149ab5cc6352c32

4. When the API call is succeeded, i.e., under the TRUE section, add an Update App State action.

   1. Click on + Add Fields and select the app state variable, i.e., 'passenger' in this case.

   2. Select Update Type to Update Field(s) and click on Update [custom_data_type_name].

   3. Click on + Add Fields, and set the field value from Set Variable > [API_action_output_variable_name].

   4. Set the API response Options to JSON Body.

   5. Set the Available Options to JSON Path.

   6. Set the JSON Path Name to either the custom JSON path or use the already created JSON path. See how to create a JSON path.

   7. Click Confirm.

   8. Similarly, set other custom field values.

Mapping JSON object values to custom data type fields

6. To display the passenger details:

   1. Select the Text widget, move to the properties panel > Text > Set from Variable menu > App State > [app_state_variable_name](that holds custom data type).

   2. Set Available Options to Data Structure Field. This allows you to select a field from a custom data type.

   3. Now Select Field that you want to display.

Display 'passenger' details

Converting JSON array into a list of custom data type

Let's see how you can retrieve the following JSON array into a list of custom data type through an example.

JSON Array

Here's how it looks when completed.

Showing a list of 'airline' custom data type

For simplicity, we'll extend the previous example and create one more custom data type named 'airline' representing a JSON array. Then, we'll convert it into a list of a custom data type using Custom Action. Later, you can access the list to display the values in Listview.

Here are the step-by-step instructions:

1. Create a custom data type with the name 'passenger' and 'airline.' Inside the 'passenger,' add one more field to capture the list of 'airline.'

   

   Nested custom data types

2. Follow the steps 2 and 3 from the previous example.

3. When the API call is succeeded, i.e., under the TRUE section, add a custom action that converts the JSON array into a list of 'airline.'

4. Follow step number 4 from the previous example but make sure that, for the airline field inside the 'passenger' data type, you set its value from the action output variable of the custom action (added in the previous step).

Storing list of airlines

5. To display values, you can follow the instructions here.

Example project

You can find the demonstrated page named 'PassengerDetailsCustomDataType' in this project.