Docs
Response Builder

Response Builder

How to use the Response builder

The Response Builder in Mask API allows you to customize API responses, making it easy to restructure, rename fields, filter, and combine nested fields within the response data.

Key Features

  • Dynamic Configuration: Modify response structure and content.
  • Real-Time Updates: See changes instantly.
  • User-Friendly Interface: Intuitive design for easy customization.

Getting Started

Accessing the Response Builder:

  • Go to the API Studio section in the Mask API dashboard.
  • Access on the Response Builder.

Configuring Responses:

  • Add and Rename Fields: Modify field names and values.
  • Data Transformation: Format and restructure data.
  • Preview Changes: View live previews.

Examples

Example(1):

  • Original Response:

    {
      "msg": "user fetched successfully",
      "data": {
        "user": { "id": 1, "name": "John", "password": "123456" },
        "age": "20",
        "location": "New York"
      }
    }
  • Custom Response:

    {
      "message": "user fetched successfully",
      "user": {
        "id": 1,
        "name": "John",
        "age": "20",
        "city": "New York"
      }
    }
  • Steps:

    Note: We will assuming that you added the original URL and it method and the response of your original URL is the same original response above

    1. Add the first field which will be for the msg:
Add child
  1. Rename the first input with message which is the new field name and enter the field source value from the original response which is the msg and type of string:
Rename field
  1. Add the user object and its child fields (id, name, age, city) with sources values (data.user.id,data.user.name,data.age,data.location) and ignore password unnecessary field:
object field object children

This is the result of Original response,Custom response after clicking the Test button:

object children

Explanation:

  1. Adding Fields:

    • Add a top-level field named message with a type of string.
    • Add a top-level field named user with a type of object.
    • Under the user field, add child fields: id, name, age, and city.
  2. Entering Source Values:

    • In the message field, enter msg as the source value, corresponding to the original field name in the original response.
    • In the id field under the user object, enter data.user.id as the source value, reflecting the nested structure in the original response.
    • In the name field under the user object, enter data.user.name as the source value, maintaining the original response hierarchy.
    • In the age field under the user object, enter data.age as the source value, accurately mapping the original response.
    • In the city field under the user object, enter data.location as the source value, aligning with the original response structure.
  3. Show Results:

    • In every change you make in the response builder you can click "Test" button to show the results and see the different between the original response and your custom response.

Example(2) With Array:

  • Original Response:
{
  "msg": "users fetched successfully",
  "data": {
    "data ": 
    [
      {
        "user":{
          "id": 1,
          "name": "John"
          },
          "age": "20",
          "location": "New York"
          },
          {
        "user":{
          "id": 2,
          "name": "Hakeem"
          },
          "age": "21",
          "location": "LE"
          }
      ]
  }
}
  • Custom Response:
{
  "message": "users fetched successfully",
  "users": [
      {
      "id": 1,
      "name": "John",
      "age": "20",
      "city": "New York"
      },
      {
      "id": 1,
      "name": "John",
      "age": "20",
      "city": "New York"
      },
  ]
}
  • Steps:

    1. Add the first field which will be for the msg:
    Add child
    1. Rename the first input with message which is the new field name and enter the field source value from the original response which is the msg and type of string:
    Rename field
    1. Add the users field with type of Array and source value of data.data:

      Note: when your choose the type array that will automatically generate child for the array field with name of items.

    object field
    1. change type of itemsfield to object and add its child fields (id, name, age, city) with sources values (user.id,user.name,age,location)
    object field

    This is the result of Original response,Custom response after clicking the Test button:

    object children

Explanation:

  1. Adding Fields:

    • Add a top-level field named message with a type of string.
    • Add a top-level field named users with a type of array. This will automatically generate a child field named items.
    • Change the items field under users to type object.
    • Under the items object, add child fields: id, name, age, and city.
  2. Entering Source Values:

    • In the message field, enter msg as the source value, corresponding to the original field name in original response.
    • In the users array field, enter data.data as the source value so the child fields of items can access the fields of the data array in the original response.
    • In the id field under items, enter user.id as the source value, aligning with the original response structure.
    • In the name field under items, enter user.name as the source value, aligning with the original response structure.
    • In the age field under items, enter age as the source value, aligning with the original response structure.
    • In the city field under items, enter location as the source value, aligning with the original response structure.

Note: The source values for the child fields of items are treated as if they are at the top level because data.data references the array directly in the original response. This allows the child fields to directly access and map the values from the array.

  1. Show Results:
    • In every change you make in the response builder you can click "Test" button to show the results and see the different between the original response and your custom response.

Summary and Benefits

Using the Response Builder tool provides several key advantages:

  • Improved Readability: Field names are more descriptive and intuitive, making the API response easier to understand.
  • Enhanced Security: Sensitive data, such as passwords, can be easily removed to ensure user privacy.
  • Consistent Structure: Organizing data into a clear and consistent format simplifies data handling and integration.
  • Customization: Tailor API responses to fit specific needs without modifying the backend.

For more detailed instructions and examples, refer to the sections above.