mirror of
https://github.com/supabase/supabase.git
synced 2026-07-03 11:14:34 +08:00
176 lines
3.6 KiB
Plaintext
176 lines
3.6 KiB
Plaintext
---
|
|
id: arrays
|
|
title: 'Working With Arrays'
|
|
description: How to use arrays in PostgreSQL and the Supabase API.
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs'
|
|
import TabItem from '@theme/TabItem'
|
|
|
|
PostgreSQL supports flexible [array types](https://www.postgresql.org/docs/12/arrays.html). These arrays are also supported in the Supabase Dashboard and in the JavaScript API.
|
|
|
|
## Create a table with an array column
|
|
|
|
Create a test table with a text array (an array of strings):
|
|
|
|
<Tabs
|
|
groupId="dashboard-or-sql"
|
|
defaultValue="dashboard"
|
|
values={[
|
|
{label: 'Dashboard', value: 'dashboard'},
|
|
{label: 'SQL', value: 'sql'},
|
|
]}>
|
|
|
|
<TabItem value="dashboard">
|
|
|
|
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
|
|
1. Click **New Table** and create a table with the name `arraytest`.
|
|
1. Click **Save**.
|
|
1. Click **New Column** and create a column with the name `textarray`, type `text`, and select **Define as array**.
|
|
1. Click **Save**.
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="sql">
|
|
|
|
```sql
|
|
CREATE TABLE arraytest (id integer NOT NULL, textarray text ARRAY);
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
## Insert a record with an array value
|
|
|
|
<Tabs
|
|
groupId="dashboard-or-sql"
|
|
defaultValue="dashboard"
|
|
values={[
|
|
{label: 'Dashboard', value: 'dashboard'},
|
|
{label: 'SQL', value: 'sql'},
|
|
{label: 'JavaScript', value: 'javascript'},
|
|
]}>
|
|
|
|
<TabItem value="dashboard">
|
|
|
|
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
|
|
1. Select the `arraytest` table.
|
|
1. Click **Insert row** and add `["Harry", "Larry", "Moe"]`.
|
|
1. Click **Save.**
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="sql">
|
|
|
|
```sql
|
|
INSERT INTO arraytest (id, textarray) VALUES (1, ARRAY['Harry', 'Larry', 'Moe']);
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="javascript">
|
|
Insert a record from the JavaScript client:
|
|
|
|
```js
|
|
const { data, error } = await supabase
|
|
.from('arraytest')
|
|
.insert([{ id: 2, textarray: ['one', 'two', 'three', 'four'] }])
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
## View the results
|
|
|
|
<Tabs
|
|
groupId="dashboard-or-sql"
|
|
defaultValue="dashboard"
|
|
values={[
|
|
{label: 'Dashboard', value: 'dashboard'},
|
|
{label: 'SQL', value: 'sql'},
|
|
]}>
|
|
|
|
<TabItem value="dashboard">
|
|
|
|
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
|
|
1. Select the `arraytest` table.
|
|
|
|
You should see:
|
|
|
|
| id | textarray |
|
|
| --- | ----------------------- |
|
|
| 1 | ["Harry","Larry","Moe"] |
|
|
|
|
</TabItem>
|
|
<TabItem value="sql">
|
|
|
|
```sql
|
|
SELECT * FROM arraytest;
|
|
```
|
|
|
|
You should see:
|
|
|
|
| id | textarray |
|
|
| --- | ----------------------- |
|
|
| 1 | ["Harry","Larry","Moe"] |
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
## Query array data
|
|
|
|
PostgreSQL uses 1-based indexing (e.g., `textarray[1]` is the first item in the array).
|
|
|
|
<Tabs
|
|
groupId="dashboard-or-sql"
|
|
defaultValue="sql"
|
|
values={[
|
|
{label: 'SQL', value: 'sql'},
|
|
{label: 'JavaScript', value: 'javascript'},
|
|
]}>
|
|
|
|
<TabItem value="sql">
|
|
|
|
To select the first item from the array and get the total length of the array:
|
|
|
|
```js
|
|
SELECT textarray[1], array_length(textarray, 1) FROM arraytest;
|
|
```
|
|
|
|
returns:
|
|
|
|
| textarray | array_length |
|
|
| --------- | ------------ |
|
|
| Harry | 3 |
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="javascript">
|
|
|
|
This returns the entire array field:
|
|
|
|
```js
|
|
const { data, error } = await supabase.from('arraytest').select('textarray[]')
|
|
console.log(JSON.stringify(data, null, 2))
|
|
```
|
|
|
|
returns:
|
|
|
|
```js
|
|
;[
|
|
{
|
|
textarray: ['Harry', 'Larry', 'Moe'],
|
|
},
|
|
]
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
## Resources
|
|
|
|
- [Supabase JS Client](https://github.com/supabase/supabase-js)
|
|
- [Supabase Account - Free Tier OK](https://supabase.com)
|
|
- [PostgreSQL Arrays](https://www.postgresql.org/docs/12/arrays.html)
|