Data mapping & transforming
Sometimes the data returned by a data source or an API is structured not in a proper way for UI Bakery to use it inside components. You may need to reformat your data or enrich it with other properties. You may also need to make some live data calculations before you display it. All this can be achieved with UI Bakery Actions.
Accessing a nested object property
When retrieving a list of items, a lot of APIs may return an object that has a structure similar to this:
The actual list here is placed under the nested records
or another key. If we need to display this list in a Table component, we need to transform it before passing it to the Table.
There are several ways to do it:
Transforming HTTP responses
To transform HTTP responses, we recommend creating a separate code action step. In our example here, we want to transform the following object response into an array response:
We simply need to add a JS code action step to our action and specify the following code:
{{data}}
in this case represents the result of the HTTP request.
Action steps are executed sequentially, which means that any step has access to the result of the previous step execution. The{{data}}
variable keeps the result and the{{error}}
variable keeps the caught error that may occur during the step execution.
As a result, the action will return an array of items that can be easily connected to a Table or other components.
Transforming list object properties
In case you need to transform, rename, or access nested object keys, you can use a JavaScript map
function.
For example, your API returns a list of items that have a nested object:
But you need a particular property, not the whole entity, so you need it to look like this:
To transform a list of objects like this, use a separate code action step with the following JavaScript function:
You can also use a shorter version. It'll keep the original object but will also copy over the user properties to the first level of the object:
In the same way, you can do calculations, rename properties or add additional fields to the response.
Loading a single object of the list
When an API returns a list of objects but you need only one object from this list, you can transform it using JavaScript syntax for accessing array objects by object index:
In this case, only the first item of the list will be returned. This is helpful when you are working with an SQL query step and you need to receive only one item.
Receiving the header of the HTTP response
If you need to get the header from the HTTP response, switch the Transform result toggle and specify the {{res}}
variable in the Modify the result field. Then, run the action.
Converting JSON into a JavaScript object
If the returned item holds a string/JSON
representation of your data, you will need to parse it to a JavaScript object (using a JSON.parse
function) before passing it to UI Bakery components:
If you are not completely sure whether the server returns a valid JSON string, you can extend it to this version:
Last updated