Hi ! I come to ask for your help because my code does not work. When I click on my “Search” button, the repeater goes blank and doesn’t show anything from the database.
To respect the case, I copied and pasted the IDs of the field keys of my database.
The repeater works because it shows me the elements of my database. The “reset filter” button also works very well.
The code I used:
import wixData from 'wix-data';
export function searchButton_click(event) {
search();
}
function search() {
wixData.query("Motifs")
.contains("categorie", String($w("#dropdown1").value))
.and(wixData.query("Motifs").contains("themeSolMur", String($w("#dropdown2").value)))
.and(wixData.query("Motifs").contains("typeDeVetement", String($w("#dropdown3").value)))
.find()
.then(results => {
$w("#repeater1").data = results.items;
});
}
//Reset Filter
export function resetButton_click(event) {
$w("#dataset1").setFilter(wixData.filter())
$w("#dropdown1").value = undefined;
$w("#dropdown2").value = undefined;
$w("#dropdown3").value = undefined;
}
Thanks for your help !
Hello. It looks like you are almost there but need to map the values to the text elements within the repeater using onItemReady
Take a look at this post to show you the rest of the steps.
Thank you for your answer. You are talking about this function ?
$w.onReady(function () {
$w("#repeater1").onItemReady(($item, itemData, index) => {
$item("#myTitleText").text = itemData.title;
$item("#myDescriptionText").text = itemData.description;
$item("#myImage").src = itemData.image;
$item("#myButton").link = itemData.url;
});
When i use this, my “search” and “reset filter” buttons doesn’t functionning…Sorry, i really don’t understand.
@morganebregaint Yes, in here right after you set the repeater data you should be able to map the repeater items to the corresponding elements in your repeaters
.then(results => {
$w("#repeater1").data = results.items;
$w("#repeater1").onItemReady(($item, itemData, index) => {
$item("#myTitleText").text = itemData.title;
$item("#myDescriptionText").text = itemData.description;
$item("#myImage").src = itemData.image;
$item("#myButton").link = itemData.url;
})
});
@amandam ok thank you i will try 
@amandam I try this but it doesn’t work 
import wixData from 'wix-data';
export function searchButton_click(event) {
search();
}
function search() {
wixData.query("Motifs")
.contains("categorie", String($w("#dropdown1").value))
.and(wixData.query("Motifs").contains("themeSolMur", String($w("#dropdown2").value)))
.and(wixData.query("Motifs").contains("typeDeVetement", String($w("#dropdown3").value)))
.find()
.then(results => {
$w("#repeater1").data = results.items;
$w("#repeater1").onItemReady(($item, itemData, index) => {
$item("#text6").text = itemData.title;
$item("#image2").src = itemData.image;
})
});
}
//Reset Filter
export function resetButton_click(event) {
$w("#dataset1").setFilter(wixData.filter())
$w("#dropdown1").value = undefined;
$w("#dropdown2").value = undefined;
$w("#dropdown3").value = undefined;
}
@morganebregaint Okay, so can you tell me where the failure is occurring?
Are you definitely getting results back from your query?
@amandam When I run the code, there is no error message. But there is still nothing displayed in the repeater when I run a query.
This is my website if you want to see: https://animal-crossing-nh.wixsite.com/astuces/motifs
@morganebregaint I just looked. Your query is returning no results which is why the repeater does not have anything in it. You will want to work on the query first.
To be able to see what is returning you can go about this a few ways.
Either put a
console.log(results);
right after this line:
. then ( results => {
and see it in the console in the front end
OR
debug in chrome developer tools
breakpoints in chrome
Once you are sure your query is returning data it will be easier to see the repeater in action and if there are any issues with it.
@amandam I try with "console.log(results); " and this is the result:
I understand anything, sorry… Many problems just for a little code
It was very simple on your youtube video…
@morganebregaint That’s okay, you are close. So notice in your console.log output that your total count is 0, there are no results.
What I would try next is working through this part of your code. Instead of testing with all the filters at once do one at a time and build on each one.
wixData.query("Motifs")
.contains("categorie", String($w("#dropdown1").value))
.and(wixData.query("Motifs").contains("themeSolMur", String($w("#dropdown2").value)))
.and(wixData.query("Motifs").contains("typeDeVetement", String($w("#dropdown3").value)))
.find()
So instead of what you wrote above, start with one filter and get that working before you build in the others something like this where you just check the category filter first.
wixData.query("Motifs")
.contains("categorie", $w("#dropdown1").value)
.find()
I also realized you are missing your page onReady function (this is added by default in every page and is where you should write much of your code as it means there is no chance of code trying to run before the page is ready)
Also, I removed the String wrapper as you do not need to wrap the value in String the value is a string already. See the API docs for dropdown value
Once you get the first dropdown filtering you can add the others. Let me know if this is enough information to help you keep moving.
@amandam Okay, so let’s go ! I modified the code as you suggested. I removed dropdown 2 and 3 and deleted the “String”.
I run the code and the consol tells me “_totalCount: 2” for the query: Categorie => “Sols” (correct number in my database). It seems to be progressing ! But the repeater remains empty.
Actually, I deleted the “onReady function” part because I don’t know how to use it or what to put in it.
My code:
import wixData from 'wix-data';
export function searchButton_click(event) {
search();
}
function search() {
wixData.query("Motifs")
.contains("categorie", $w("#dropdown1").value)
.find()
.then(results => {
console.log(results);
$w("#repeater1").data = results.items;
$w("#repeater1").onItemReady(($item, itemData, index) => {
$item("#text6").text = itemData.title;
$item("#image2").src = itemData.image;
})
});
}
//Reset Filter
export function resetButton_click(event) {
$w("#dataset1").setFilter(wixData.filter())
$w("#dropdown1").value = undefined;
}
Omg, i use this code and the first filter is functionning !
function search() {
wixData.query("Motifs")
.contains("categorie", $w("#dropdown1").value)
.find()
.then(results => {
console.log(results);
$w("#repeater1").data = results.items;
});
}
And when i choose the filter “Vêtements”, i see just one item (the correct number):
I will try to add the other filters !
Hooray! I’m so glad it’s moving along for you. Keep us posted and lmk if you need any more ideas.
@amandam Thank you so much ! I keep the topic open in case I have new problems with the filters. Thank you for your patience, I almost gave up haha !
I add the second filter (dropdown2) and everything is functionningg. But when i add the third filter (dropdown3), i have the same problem as before (The console say that the code found 0 items. However, I copy paste the code… :
okay:
function search() {
wixData.query("Motifs")
.contains("categorie", $w("#dropdown1").value)
.and(wixData.query("Motifs").contains("themeSolMur", $w("#dropdown2").value))
.find()
.then(results => {
console.log(results);
$w("#repeater4").data = results.items;
});
}
I have nothing working anymore…I don’t know why 
I despair
Hi! Sorry I’m just seeing this. So, your query works until you add the 3rd dropdown as a parameter?
Is it possible that using “and” is making the query too restrictive? Meaning, when you use “and” the results all must contain ALL of those values exactly or it will return nothing.
@amandam Hi! It looks like I managed to get the dropdowns to work (until dropdown 3). To do this I filled in all my used key fields.
Before, I had empty fields when the item was not affected by the filter and the dropdown was not working. So I replaced the empty boxes in my database with “Aucun” and the dropdown is functionning.
Is it possible to replace “.add” with “.or” ? because it’s not an addition filter, it’s an other possibility.
Sorry for my bad english ahah. I hope i explain well…
@morganebregaint You are explaining fine!
So as far as what to use, it will depend on what you want to happen.
using and – the query must have value1 and value2 and value 3 to be returned
using or – the query must have value 1 OR value 2 or value 3 to be returned.
You can read through the example in the API docs for .or() here
