Help with Filtering a Repeater

Ask the community
,
1

Hello,

I am completely new to coding and have followed several tutorials, but can’t seem to figure out what I’m doing wrong. I am creating a website with multiple recipes on it. I need to allow visitors to be able to filter through the All Recipes page. I would like them to do this by Category.

I have a Recipe database and a Dropdown List database containing the Category options. The Categories field in the Recipe database is a reference field connected to the Dropdown List database.

At this point everything works except the actual filtering. The page title changes with selection, and the clear action button works as well. However, the repeater itself does not change when I make different category selections on the dropdown.

This is on a dynamic page. I have attempted to do the same on a regular page, but it did not work at all.

Any and all help is greatly appreciated. Let me know if any additional information is needed from me.

  • Dropdown List dataset = #ListCategory

  • Recipe dataset = #dataset1

  • Recipe dynamic dataset = #recipeDataset

  • Dropdown = #dropdown1

  • Page Title = #pageTitleText

This is my current code:

import wixData from ‘wix-data’ ;

$w.onReady( function () {

});
let selectedCategories = “” ;

export function dropdown1_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
wixData.query( “DropdownList” )
.eq( “title” , $w( “#dropdown1” ).value)
.find()
.then( (results) => {
let firstItem = results.items[ 0 ]; //First Item in results
selectedCategories = firstItem._Id;

    wixData.query( "Recipes" ) 
        .eq( "categories" , selectedCategories) 
        .find() 
        .then( (results) => { 
            $w( "#repeater1" ).data = results.items; 
            $w( "#pageTitleText" ).text =  "Recipes - "  + $w( "#dropdown1" ).value; 
        }) 
        . **catch** ( (err) => {

let errorMsg=err;
});
});
}

export function clearButton_click(event, $w) {
// Reload all items when clear button clicked
wixData.query ( “Recipes” )
.find()
.then( (results) => {
$w( “#repeater1” ).data = results.items;
$w( “#pageTitleText” ).text = “Recipes - All” ;
})
. catch ( (err) => {
let errorMsg = err;
});
}

2

What type is the “categories” field? A string? An array? a reference? a multi-reference? + Can you post an example of its value?

3

It’s a reference field in my Recipes collection, looking at the Dropdown List collection.

1920×1080 450 KB

Does this help? I am new to all this and am not 100% sure what value means. The field itself is just text of various category options.

1920×1080 231 KB

I was under the impression that I had to have separate collections for this to work correctly.

4

For reference field you’ll need to use the id of the category. like

.eq("categories", /*here put the category _id and not the category title*/).

You should use it as the value of your dropdown

5

@jonatandor35 Thank you for the information. I have added the .include and replaced “referenceField” with the field name “Categories” to match my collection information. Is that correct?
Also, can you verify that I added the code in the correct place? I’m currently getting the error " Included Categories field is deleted and will not be included."

I apologize, I should clarify that I don’t know anything about coding except for what I’ve learned over the last week trying to accomplish this.

1920×1080 332 KB

1920×1080 237 KB

6

Nothing changes within the repeater, no errors or messages come up.

    wixData.query( "Recipes" ) 
        .eq( "categories" , selectedCategories) 
        .include( "categories" ) 
        .find() 
        .then( (results) => { 
            $w( "#repeater1" ).data = results.items; 
            $w( "#pageTitleText" ).text =  "Recipes - "  + $w( "#dropdown1" ).value; 
        }) 
        . **catch** ( (err) => {

let errorMsg=err;
});
});
}

7

@ambrosiarae as you can see I fixed my previous answer.
i.e. no need to use .include(), but in your query you should use the category _id and not the category title.

8

@jonatandor35 Okay, then can you tell me where i find the Category_id? I am currently using the field id, but I guess that is not the same. Thank you.

9

@ambrosiarae The category _id is in your Dropdown List collection.
Open the collection data manager (the second screenshot above), click Manage Fields and make it visible.

10

@jonatandor35 I found the ID’s for each category within the Dropdown List as shown in the screenshot. Can you tell me how I should insert this in the code?

I can get one of the _Id’s to work and filter.
wixData.query( “Recipes” )
.eq( “categories” , “516dcace-b339-446e-be87-0cae1fe54562” )

But when I add the additional _Id’s it no longer works. What is the correct way to define them within the code. I was using this format:
wixData.query( “Recipes” )
.eq( “categories” , “_ID#”, “_ID#2”, etc… )

Thank you so much for your time and patience.

1920×1080 275 KB