[SOLVED] Database query breaks static filter

Ask the community
, ,
1

Hi guys!

I have a database filter set to only show restaurants in the repeater that is located in a certain city (Stockholm). See the picture:

283×510 17 KB

Further, I have some checkboxes on my page that let the users filter the restaurants on 3 other parameters, such as “Type of Restaurant”. For those filters I have applied the following code:

import wixData from 'wix-data';

export function searchButton_click(event) {
    search();
}

function search() {
    wixData.query("Courses") 
        .contains("bstFr", String($w('#vibeGroupBox').value))
        .and(wixData.query("Courses").contains("typ", String($w('#typeGroupBox').value)))
        .and(wixData.query("Courses").contains("soltagg", String($w('#sunshineGroupBox').value)))
    
    .find()
    .then(results => {
        $w("#repeater6").data = results.items;
    });
}

export function resetButton_click(event) {
    $w('#dataset1').setFilter(wixData.filter());
    $w('#vibeGroupBox').value = undefined;
    $w('#sunshineGroupBox').value = undefined;
    $w('#typeGroupBox').value = undefined;}

The Courses in the code is referring to the collection ID.

The problem is that when the results from the checkboxes are pushed to the repeater, the initial location filter is overruled. In other words, when using the checkbox filters, all items from the database appear on the repeater, even if they are not tagged with “Stockholm”.

Any ideas on how to fix this?
Thanks in advance!

2

To clarify, the end goal for me is to be able to have 2 pages on my site, one for each city that I cover. Each page should look identical, except for the fact that they should only show restaurants from the city the specific page is covering.

Right now my check box filters screw that up and load all restaurants in my repeater.

3

Hi Andre,

Unfortunately, there’s nothing preventing many Velo coders from heading down this path, but using the dataset filter approach along with wixData query on the same repeater is problematic. Initially, the data is tied to the dataset, but when you apply the results of the query to the repeater, that dataset filter is wiped out and the repeater is then tied only to the results of the query.

It looks like you are reasonably comfortable writing query code. I would suggest dumping the dataset approach altogether, and populate the repeater initially with a wixData.query with a condition limiting it to a certain city. Then, you would need to apply the city condition to the wixData.query search function above to filter the restaurants on these other conditions.

4

Thank you Anthony.
I hope I understood you, correctly and followed this guide.

That resulted in the following code to populate my repeater with information from my collection. That worked perfectly, except for one thing .
The “vibeTxt” is a text box in my repeater that I need to be populated with information from a field called “bstFr”.

The “bstFr” field is however not text, it’s set to tags . The textbox is, therefore (I suppose) left empty. Do I need to use something else than the .txt call for tags?


$w.onReady(async function (){
    $w('#restRepeater').onItemReady(($item, $itemData, index)=>{
        $item('#restImage').src = $itemData.image;
        $item('#restTitle').text = $itemData.title 
        $item('#soltimmarTxt').text = $itemData.soltimmar
        $item('#vibeTxt').text = $itemData.bstFr  
        $item('#text48').text = $itemData.info
    })
    const {items:uteserveringar} = await wixData.query('Courses').contains("stad","Stockholm")
    .find()

    $w('#restRepeater').data = uteserveringar
})
5

Andre, I am assuming that the “bstFr” field can accept multiple values since you set it to the type tags. In any event, you will need to loop through the “bstFr” array to cull out the value(s) to display in the text element of the repeater. If the value has a matching “friendly” description, you will need to obtain that in the loop. I’d write some sample code, but it’s unclear how you have it set up.

6

You are right!
I would be very grateful if you would be able to write some sample code.

Here are some pictures to help you understand how it’s set up.

The textbox on my site


Here is where I want the “bstFr” field information to show. Right now it’s only saying “Något”, which is a random placeholder text I wrote. This is not replaced when I run the code the way my code is set up right not.

The “bstFr” field in my collection


The different options are simply for when I recommend you go to a certain restaurant.
It’s in Swedish and says Beer, Wine, Coffee, or Lunch.

I have about 7-9 options that I chose from when tagging an entry in the collection.

Hope this can help you do a quick sample loop.

7

You could just apply the join function to it. It will create a comma-separated string out of the tag array:

let bstFrString = itemData.bstFr.join(",");
$item('#vibeTxt').text=bstFrString;
8

Thanks Anthony, that worked perfectly.
I replaced the comma with a blank space, otherwise the words was split weirdly in the textbox.

I really appreciate your patience and help!

9

Andre, glad you have it working as you had hoped.