v1.3
Core Concepts
Datasource Reference
Framework Reference
Widget Reference
JS Errors
JS Errors
Data Type Mismatch
This error occurs when the value in the property of the widget does not match the data type required by the property.
This value does not evaluate to type Array[Object]
Why do you see this error?
While working with Tables or Lists, you may encounter this error, as the data property expects an Array of objects which might not match the data type of the API response.
Solution:
The solution to this is to bind the array inside the response object or transform the response object using javascript. Take an example response of the fetch users API as below. Binding it to a table directly would lead to an error.
1
{
2
"next": "https://mock-api.appsmith.com/users?page=2&pageSize=10",
3
"previous": null,
4
"users": [
5
{
6
"id": 1,
7
"name": "Barty Crouch",
8
"status": "APPROVED",
9
"avatar": "https://robohash.org/sednecessitatibuset.png?size=100x100&set=set1",
10
"email": "[email protected]",
11
},
12
{
13
"id": 2,
14
"name": "Jenelle Kibbys",
15
"status": "APPROVED",
16
"avatar": "https://robohash.org/quiaasperiorespariatur.bmp?size=100x100&set=set1",
17
"email": "[email protected]",
18
}
19
]
20
}
Copied!
To overcome this, we can bind the user's array of the response instead of the entire response object using javascript:
1
{{ fetch_users.data.users }}
Copied!
This value does not evaluate to type Array[{ label: string, value: string }]
Why do you see this error?
While adding options to single select or multi-select dropdowns, we might face a data mismatch error**.** In such cases, make sure the options property is an array of objects containing a label and value as strings.
Solution:
In case the response does not contain label and value keys as below, we can map over the response to transforming it using javascript
1
// invalid response of fetchColors API
2
[
3
'Blue',
4
'Green',
5
'Red'
6
]
Copied!
1
// Transform Response
2
{{
3
fetchColors.data.map((color) =>{
4
return {
5
label: color,
6
value: color
7
}
8
})
9
}}
Copied!
The value does not evaluate to type Array[{x: string, y: number}]
Why do you see this error?
The below image shows that there is an error in the Chart Data field of the Chart**,** giving us the same error. _**_The Evaluated Value here, indicates the current value of the field and in the image, we can see that the current value is an array while the error indicates that it must be an array<x, y>.
Solution:
In cases like these, you can use javascript to transform the data to the correct data type or access the correct data inside the object. The below code reduces the fetch_orders.data array to aggregate orders based on the date into an array <x, y> where x is the date of the order and y is the order amount
1
{{
2
_.values(fetch_orders.data.reduce((accumulator, order) => {
3
if(accumulator[order.date]) {
4
accumulator[order.date].y += order.orderAmount
5
} else {
6
accumulator[order.date] = { x:order.date, y: order.orderAmount };
7
}
8
return acc;
9
}, {}))
10
}}
Copied!
Value does not match ISO 8601 standard date string
Why do you see this error?
The date picker expects its default date in the standard ISO format. If the date you provided does not match this, you'll see this error.
Solution:
To resolve this, you can transform the date string using moment.js.
1
// Moment can be used to set the default date to the current date
2
{{moment()}}
Copied!
1
// Moment can parse your date format
2
{{ moment("2021-07-26", "YYYY-MM-DD") }}
Copied!
This value does not evaluate to type boolean
This error typically occurs in the isVisible and
isDisabled properties and indicates that the value in the property does not match a boolean type. You can solve this by using a comparison operator.1
{{ Dropdown1.selectedOptionValue === "RED" }}
Copied!
Syntax Error
This error occurs when there is invalid javascript inside the handlebars
{{ }}. The evaluated value of the field is displayed as undefined in this case. Double-check the number of braces in your code and consider re-writing your JS as multi-line code.In the example below, fetch is not defined anywhere in the application
Cyclic Dependency Error
An app gets a cyclic dependency error when a node is directly or indirectly dependent on itself.
Reactivity and Dependency Map
In Appsmith, we define all user-editable fields as nodes, and to provide reactivity, a dependency map is created between these nodes to find the optimal evaluation order of these nodes. For eg: when you would refer to
{{Api1.data}} in a Table1's tableData field, there is a dependency created between Api1.data and Table1.tableData. So every time Api1.data updates, we know Table1.tableData needs to update as well.1
// Table1.tableData depends on Api1.data
2
Api1.data -> Table1.tableData
Copied!
Similarly, all parent nodes are implicitly dependent on the child nodes to ensure updates are propagated up an entity object. A more straightforward way to understand this is that if a child node updates, the parent node and its dependencies should also be updated.
1
// Implicit. Parent depends on children
2
Api1.data -> Api1
3
Table1.tableData -> Table1
4
​
5
// Explicit. Table1.tableData depends on Api1.data
6
Api1.data -> Table1.tableData
Copied!
The most common scenario that a cycle occurs is when you would try to bind a node to its parent node. Since it is impossible to evaluate an app with a cyclic dependency, we will have to exit out and be in an error state till the cycle is resolved.
1
// A cycle is formed
2
Table1 -> Table1.tableData
3
Table1.isVisible -> Table1
Copied!
Debugging
For debugging JS logic inside widget actions, you can use
debugger statement.Description
The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.
Syntax
1
debugger;
Copied!
Examples
Using the debugger statement
The following example shows code where a debugger statement has been inserted, to invoke a debugger (if one exists) when the function is called.
1
function potentiallyBuggyCode() {
2
debugger;
3
// do potentially buggy stuff to examine, step through, etc.
4
}
Copied!
When the debugger is invoked, execution is paused at the debugger statement. It is like a breakpoint in the script source.
Note: You need to have browser console open to make the debugger work.
Debugging Errors With Console.log()
Aside from using the
debugger, it is also possible to use console.log() to inspect various parts of your code. The video below illustrates how to do this:Last modified 1mo ago