Transforming Data

Transformations help you clean up your data before passing it to UI components. While building applications, the raw data you fetch from an API or database often needs customization before displaying it in the components. You might need to:

Convert raw ISO timestamps into DD/MM/YYYY.
Flatten deeply nested objects for use in tables or dropdowns.
Convert currency, distance, or temperature values before display.
Adjust field names to match component expectations.

That’s where data transformations come in. It helps you to shape your backend data into a frontend-friendly format, keeping your UI logic simple and your app easier to maintain.

You can write transformation code in JavaScript or Python. Let’s say you’re building an employee management dashboard, and your getEmployees API returns a lot of extra data:

[
  {
    "id": 1,
    "name": "John Doe",
    "email": "[email protected]",
    "phone_number": "+91876543210",
    "department_id": 1,
    "salary": "$50k"
  },
  { ... }
]

But in your table, you only want to display id, name, designation fields. Instead of changing the API or manually filtering inside every component, you can transform the data once, at the query level.

Using JavaScript

Head to the Transformations tab of your query and write your javascript code:

return data.map(item => ({
	id: item.id,
	name: item.name,
	designation: item.designation
}));

This ensures every time the query runs, your components receive exactly the shape of data they need.

Using Python

If you’re more comfortable with Python, just switch the language in the transformation tab and use a similar approach:

[
    {"id":item['id'],
     "name": item['name'],
     "designation": item['designation']
    } for item in data
]

Transformations provide you with an easy way to adjust your data before using it in your applications.

Using JavaScript​

Using Python​

Using JavaScript

Using Python