Supabase dynamic data sorting, filtering, displaying

andrew.prshkv · 2024-12-13T19:56:17.358Z

Hi All!

I’m building a filtering system that fetches dynamic data from Supabase.

So, here how it works. I have 2 dropdowns.

#1 - Main Category
#2 - Sub-category

The table in Supabase has columns ID, parent_id, name_of_product (screenshot below)

Screenshot 2024-12-13 at 8.52.13 PM862×412 24.7 KB

For dropdown #1 I need to group everything by parent_id and then display only related names into dropdown #2.

I achieved to group by and display their parent_id and id in related dropdowns.

But I’m facing an issue and can’t display these lists as names of products, they keep displaying as just an id number.

Screenshot 2024-12-13 at 8.54.41 PM580×316 26.7 KB

Question: How to display names of categories (not a parent_id) and sub-categories (not their id)?!

I tried everything, filtering, grouping, etc. nothin works.

Please share your experience.

Thanks!

P.S. @Nass perhaps you can help too?

amer · 2024-12-13T22:14:07.330Z

Hi @andrew.prshkv !

If I understand your setup correctly, why not try making a second query to fetch the name_of_product for the selected id in Dropdown #1?
Here’s how the query would look:

SELECT name_of_product
FROM your_table
WHERE parent_id IN (:list_of_ids);

Example

If your list of parent_ids is [1, 2, 3], the query would become:

SELECT name_of_product
FROM your_table
WHERE parent_id IN (1, 2, 3);

Nass · 2024-12-14T09:57:56.985Z

Hey @andrew.prshkv,
You can either do as @amer pointed out, or you can use query join syntax to fetch data from your products table in the main table (in this case you only need to fetch from one table).

You can get more details here:

supabase.com – 14 Dec 24

Querying Joins and Nested tables | Supabase Docs

The Data APIs automatically detect relationships between Postgres tables.

and here a demo page that showcase how to use query join

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Best!

andrew.prshkv · 2024-12-14T13:58:46.671Z

@amer @Nass Thanks, works now!