How to Use JS Object Within Appsmith?
JavaScript(JS) is a programming language used on both the client and the server-side. It also supports the creation of an object known as JavaScript Object (JS Object). Javascript object is a collection of properties designated by a key-value pair. In this guide, you’ll learn how to use JavaScript(JS) objects within Appsmith.

JavaScript Object

JavaScript Object(JS Object) is a collection of key-value pairs which defines its attributes. The object attributes are similar to the variables defined in JavaScript, except they are accessed with specific notations for the particular object associated with and store different values for different objects.

JavaScript Object in Appsmith

JS Object in Appsmith is an encapsulation of variables and functions associated with it. It is a template similar to a Java class that holds the variables and the underlying functions used to perform actions.

Add a JS Object

You can create a JS Object by navigating to Explorer → Click the (+) sign next to QUERIES/JS and select New JS Object.
Add a JS Object from explorer
Click on the JS object to reveal the Code associated with it. You’ll see that the JS Object code opens up to display a template that follows a particular structure.

Structure of JS Object

A JS Object follows the following template:
//a template that defines a JS Object in Appsmith
export default {
myVar1: [], // you can define array
myVar2: {}, // you can define object
// define functions
myFun1: () => {
//write code to manipulate the data or perform actions
//like calling an API or executing a database query
},
myFun2: async () => {
//use async-await or promises
// this helps when you would want to trigger queries
//or API calls at run time.
// For example, API_NAME.run() - run method executes the call
//and returns the response.
}
}
In Appsmith, you can use the inherent JavaScript way of accessing or creating JS objects in the functions only that are defined within a JS Object.
The point to remember is that Appsmith provides access to your JS objects across the Appsmith platform, and for this, we export the JS objects. Thus, the JS Object notation should start with export default.
If you do not start the notation with export default, the JS object will be invalid and can’t be defined as Appsmith does not recognize them and throws an error.

JS Notations within Methods

You can use the properties of the JS Objects defined localized to your methods using dot or bracket notation. For example, you have defined a variable that is local to your method, as shown in the code snippet below:
export default {
useJSObjectProps: () => {
const userObject = new Object(); //object with method scope and
// is local to this method.
userObject.id = “1”; // setting property using dot notation
userObject[“name”] = “John”; //setting property using bracket
//notation
showAlert(userObject.id); // an alert function available on
// Appsmith to alert the property value.
// You can access property using dot
// notation.
showAlert(userObject[“name”]); // You can access property using bracket
// notation.
}
}
The default JavaScript object creation and property setters and getters work if you define them inside the method. However, a code snippet as below will throw an error.
Editor showing syntax errors
Let’s quickly understand how to use the JS Object within Appsmith.

How to Use JS Objects within Appsmith?

Appsmith supports the built-in access ways provided by JavaScript. Let’s take a use case to understand better how you can use JS objects within Appsmith.

Use Case

You are building a user directory, and the user data is fetched either by using an API/ a database query.
The API/query returns a collection of user data. You have to fetch the user’s KYC status that a third-party API supplies for every user in the collection. Once you receive the KYC status, you have to update it for each user in the collection and then return the updated user data.
Let’s build on this use case by following the below steps:

Create API

You can either add a database query or call an API for fetching the user data.
API to Fetch User Data
For our use case, let’s add an API that returns a collection of user data.
Navigate to the Explorer — > Click the (+) sign next to QUERIES/JS and select New Blank API. In our case, let’s name the API- GetUserList. The API generates a collection of users, where each user object has properties - Id, Name, and Email.
How to create an API?
A sample response generated by the API will be as follows:
{
"users": [
{
"id": "1",
"name": "John Smith",
"email": "[email protected]"
},
{
"id": "2",
"name": "Jack Jones",
"email": "[email protected]"
},
{
"id": "3",
"name": "Emily Brains",
"email": "[email protected]"
}
]
}
API to Check KYC Status
Similar to GetUserList API, let’s add another API, GetUserKycStatus, that will check the given user’s KYC Status and returns status with pass/fail as a response:
{
“status”: “Pass”
}
How to Display the Data?
Appsmith provides several different widgets that you can use to display data. We’ll use a table widget to display the data for our use case. Drag a table widget from the left navigation bar onto the canvas. It’s advisable to provide a unique name to the widget like BeforeJSCall. For a table widget to display data, it needs data collection. The API GetUserList returns a user array. To bind the API response data, you can use {{ GetUserList.data.users }} in the table data property. The table widget displays data as below:
Display API response in table widget
As per the use case, the user’s KYC status is recorded by a third-party API GetUserKycStatus. To trigger the API call, you’ll have to iterate through the user collection and fetch the status per user. In such scenarios, you can use JS Objects on the Appsmith.

Create JS Object

Appsmith provides JS Objects that can perform a particular or series of actions. Create a JS Object by navigating to the Explorer → Click the (+) sign next to QUERIES/JS, and select New JS Object.
Copy and paste the code snippet below in the JS function’s code editor.
export default {
getKycStatusForUsers: () => {
const updatedUsers = []; // add an empty array of users.
//An API call to get the user collection and then iterate through the collection using forEach
GetUserList.data.users.forEach(function(userObj){
// Create a user object to add the data
const userObject = {
id: userObj.id,
name: userObj.name,
email:userObj.email,
kycStatus: GetUserKycStatus.data.status // call an API to fetch the User Status
}
updatedUsers.push(userObject); // Adding the updated user to the collection
});
return updatedUsers; // return the array with the updated user data
}
}
With the above code:
  • Create an empty collection updatesUsers.
  • Call the API GetUserList right inside the JS function
  • Use forEach to iterate over the data
  • Call GetUserKycStatus API for every user object in the array that returns the user’s KYC status.
  • Create a user object. Here you can use default JavaScript to create an object and its associated properties.
  • Update existing properties or add new properties. Here you can use default JavaScript to access or add properties to an object.
  • Add the updated user object to the updatedUsers collection using the push method.
  • Return the updated collection
Add a table widget onto the canvas, name it as AfterJSCall and bind the JS function to the table data. Use {{JSFetchUsers.getKycStatusForUsers()}} to bind the data.
Here’s a video that shows how the above code works:
How to use JS object within Appsmith?

Conclusion

JavaScript Objects (JS Objects) are a powerful way to manipulate data by combining APIs and Query responses. It’s an easy and efficient way of handling your dataset and connecting various trigger points to display it. With Promise and JavaScript, build robust data manipulation logic under Appsmith’s hood.