Data Transformation | Appsmith

https://docs.appsmith.com/write-code/reference/transform-data • 67 KB fetched
Open original page
Data Transformation | Appsmith

Skip to main content

Ask AI
Search

Ask Appsmith AI Submit message

Examples How do I install Appsmith using Docker? How do I connect to my local PostgreSQL database? How do I pass inputs from a widget to a query? How do I trigger multiple queries conditionally? How do I fix the error: This value does not evaluate to type Array<Object>?

Search

Try Appsmith

* Get Started

* Introduction

* Build Your First App

* Self Hosting

* New Installation Guides

* Manage Installation

* Upgrade Installation Guides

* Concepts

* Connect Data

* Overview

* How-to Guides

* Reference

* Datasources

* Query Settings

* Concepts

* Build Apps

* Overview

* Quickstart

* How-to Guides

* Reference

* Widgets

* Accessibility

* Theme

* Sample Apps

* Write Code

* Overview

* How-to Guides

* Reference

* Global Objects

* Global Functions

* JS Libraries

* Fetch API

* Data Transformation

* JavaScript Settings

* Concepts

* Best Practices

* Manage Apps and Users

* Authentication

* Granular Access Control

* Versioning with Git

* Setup SCIM Provisioning

* Embed Appsmith

* Migrate Applications

* Audit Logs

* Branding

* External Client Portal

* Packages

* Overview

* Tutorial

* How-to Guides

* Reference

* Package Version Control

* GIT Apps with Packages Best Practices

* Code Packages

* UI Packages

* Workflows

* Overview

* Tutorial

* How-to Guides

* Reference

* Workflow Triggers

* Workflow Queries

* Workflow Functions

* Pass Parameters to Workflows

* Run History

* Troubleshooting

* Overview

* Self-hosting Errors

* Application Errors

* Product

* FAQ

* Security

* Telemetry

* Support at Appsmith

* Privacy Policy

* Release Notes

* Contribute

© 2026 Appsmith, Inc.

*

* Write Code

* Reference

* Data Transformation
On this page
Data Transformation

This page provides information on how to transform data using JavaScript, which allows you to manipulate, format, and display data in your applications.

Transform arrays 

The map() function allows you to transform arrays of objects, such as extracting specific fields or formatting data. For example, if you want to transform an array of user objects to display only the names, you can bind the query like this:

{ { getUsers . data . map ( user => user . name ) } }

Example 2: If you want to display the transformed data in a Select widget, you can bind the query like this:

{ { getUsers . data . map ( user => ( { name : user . name , code : user . id } ) ) } }

Parse JSON 

Use JSON.parse() to convert JSON strings into objects for easier data manipulation. For example, if you receive a JSON string from an API, you can create a function inside a JSObject and parse it like:

const jsonString = getUsers . data ; // {"name": "Alice", "age": 25}
const parsedObject = JSON . parse ( jsonString ) ;
console . log ( parsedObject ) ;
// Output: { name: 'Alice', age: 25 }

Conditional display 

You can use JavaScript expressions to enable or disable components, change styles, or adjust visibility based on data conditions. For example, if you want to disable a button based on a condition, you can bind the data to the Disabled property of the widget like:

{ { appsmith . user . email == "[email protected]" ? false : true } }

Example 2: If you want to change a Table cell's background color based on the status of an order, you can bind the data to the Cell Background property, like:

{ { currentRow . status === "approved" ? "#22c55e" : "#facc15" } }

Filter data 

The filter() function allows you to narrow down datasets, displaying only relevant information. For example, if you want to display products that cost less than $100, you can bind the data to a Table like:

{ { getProducts . data . filter ( product => product . price < 100 ) } }

Aggregate value 

Use reduce() to calculate totals or other aggregated values from arrays of objects. For example, if you want to calculate the total sales amount from an array of sales objects, you can use the following code:

{ { getSales . data . reduce ( ( total , sale ) => total + sale . amount , 0 ) } }

Transform to Key-Value pairs 

Use reduce() to convert an array of objects into key-value pairs. For example, if you want to transform an array of user objects into an object where the keys are user IDs and the values are user names, you can use the following code:

{ { getUsers . data . reduce ( ( acc , user ) => {
acc [ user . id ] = user . name ;
return acc ;
} , { } ) } }
// Transforms [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }]
// into { 1: "Alice", 2: "Bob" }.

Format dates 

Use moment to format dates into readable or specific display formats. For example, if you want to display event titles along with their formatted dates, you can use the following code:

{ { getEvents . data . map ( event => ( {
title : event . title ,
formattedDate : moment ( event . date ) . format ( 'MMMM Do YYYY' )
} ) ) } }

Format number 

You can use toFixed() to format numbers with a specific number of decimal places. For example, if you want to display a price with two decimal points, you can bind the data like:

{ { product . price . toFixed ( 2 ) } }

This will format the price field from the product object, ensuring that it always displays two decimal places, such as 19.99 instead of 19.98765 .

Was this page helpful?

Edit this page

Previous
Fetch API
Next
JavaScript Settings

* Transform arrays

* Parse JSON

* Conditional display

* Filter data

* Aggregate value

* Transform to Key-Value pairs

* Format dates

* Format number
Data Transformation | Appsmith

Links found on this page
