How to get a repeater to show filtered dataset?

Ask the community
,
1

I have a dataset of items such as title, picture, description etc.
Now I am using multiple repeaters to display the content of this dataset on one page.
However each repeater shows exactly the same content of dataset, obviously because each one is connected to the same dataset.
Question is, how can I make each repeater show portion of the dataset separately?
For example, there are 3 repeaters on a page, call them repeater A, repeater B, repeater C and a dataset.
I want repeater A to show content of dataset that is categorized 1, repeater B to show category 2 content and repeater C to show category 3 content all from same dataset (so I don’t have to create so many datasets)

Is this possible or will I need to create separate datasets for repeaters to display differently?

Thank you😃

2

Hi there :raised_hand_with_fingers_splayed:

The best way to achieve this is by using code to populate the repeaters instead of the dataset.

let items = { cat1: [], cat2: [], cat3: [] }

let cats = Object.keys(items); // Array
for (let i = 1; i <= cats.length; i++) {
    items[`cat${i}] = await wixData.query('collection').eq('category', `cat${1}`)
    .find().then((result) => {
        return result.items;
    })
    
    $w(`#repeater${i}').data = items[`cat${i}];
    
    if ($w(`#repeater${i}').data === 0) { $w(`#repeater${i}').collapse() }
}

Understanding the code:

Line 1: Declaring an object that will hold all the items;

Line 3: Get an array of the object keys declared in line #1.

Lines (4-13): A for loop to run 3 times instead of writing the code multiple times.

Line 5: Query the database with the specified category (1, 2 or 3) and get the matching items

Line 10: Assign the returned items from the query to the repeater’s data.

Line 12: Collapse the repeater if no item retuned.

Hope this helps~!
Ahmad