Create a list
The List element is to turn data into a more flexible format instead of a tabular format.
Before starting to write SQL in the Postgres data node, remember to connect to your PostgreSQL database first on the Resource page. If you don't have an existing PostgreSQL database, you can create an Acho-hosted Postgres on the resource page.
- 1.Write the following query to create a "products" table in the Postgres data node and click Run. (Skip this step if you already had a table to work on)
CREATE TABLE products AS (
SELECT '7 Shakra Bracelet' AS title, 'Bracelet' AS type, 42.99 AS price
UNION ALL
SELECT 'Anchor Bracelet Mens' AS title, 'Bracelet' AS type, 69.99 AS price
UNION ALL
SELECT 'Bangle Bracelet' AS title, 'Bracelet' AS type, 39.99 AS price
UNION ALL
SELECT 'Boho Bangle Bracelet' AS title, 'Bracelet' AS type, 42.99 AS price
UNION ALL
SELECT 'Boho Earrings' AS title, 'Earrings' AS type, 27.99 AS price
)
2. In the same data node, write a query to retrieve data from the
products table and click Save.SELECT * FROM products
3. Double-click a page to enter editing mode. Then, drag a List element to the page and select the data node you just created as the data source.
The list element can only digest an array. In this example, when the data is sent from the data node to the list, the table will be transformed into an array of JSON objects as shown below.
[
{
"title":"7 Shakra Bracelet",
"type":"Bracelet",
"price":42.99
},
{
"title":"Anchor Bracelet Mens",
"type":"Bracelet",
"price":69.99
},
{
"title":"Bangle Bracelet",
"type":"Bracelet",
"price":39.99
},
{
"title":"Boho Bangle Bracelet",
"type":"Bracelet",
"price":42.99
},
{
"title":"Boho Earrings",
"type":"Earrings",
"price":27.99
}
]
4. Drag a Text element into the list and type
${$item.title} . ${} tells the system that you are using an accessor to access data. $item.title means to extract the value of the title key in each JSON object.
5. Click the Preview button to see the result. As you can see, all the values in the
title column are shown on the page. 
Last modified 2mo ago