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.
When retrieving a list of items, a lot of APIs may return an object that has a structure similar to this:
{
length: 10,
records: []
}
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.
An HTTP step has a build-in property called Result mapper. This setting accepts any JavaScript that can help you transform the result. In the example above, you only need to add the following JavaScript code to transform the object response into an array response:
return {{data.records}};
Accessing the nested property
{{data}} in this case represents the result of the HTTP request.Load Table, Load Row, and other Action steps don't have a Result Mapper setting. Also, sometimes the transformer may take more code lines, so it makes sense to move it to a separate Code action step.
To access a record property of the previous step, just add a new Code step with the following piece of code:
return {{data.records}};
Code step
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 could have occurred 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.
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.
You need it to look like this:
To transform the list of objects like this, use a Result Mapper setting or a separate Code action step with the following JavaScript function:
return {{data}}.map(item => {
return {
id: item.id,
price: item.price,
name: item.user.name,
email: item.user.email
};
});
Data mapping
You may also use a short version. It'll keep the original object but will also copy over the user properties to the first level of the object:
return {{data}}.map(item => {
return {
...item,
...item.user
};
});
In the same manner, you can do calculations, rename properties or add additional fields to the response.
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:
return {{data[0]}};
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 need to receive only one item.
If you need to get the header from the HTTP response, specify the {{res}} variable in the Transform result field and run the action:
If the returned item holds a
string/JSON representation of your data, you will need to parse it to a JavaScript object before passing it to UI Bakery components using a JSON.parse function:JSON.parse(data['your_item'])
Please note, that
JSON.parse will fail against some empty values as well as non-valid JSON strings, so the safe statement will look like this:const yourItem = data['your_item'] ? JSON.parse(data['your_item']) : {};
If you are not completely sure whether the server returns a valid JSON string, you can extend it to this version:
const yourItem = {};
try {
yourItem = JSON.parse(data['your_item']);
} catch (e) {}
Last modified 7mo ago