My #dataset2 contains three columns: I’ll refer to them as A, B & C. I want my website to take user input for A & B (#dropdown2 & #dropdown3) to filter the #dataset2 for C and then display the filtered data for C in #text29. I am a beginner with coding; my best guess on how to do this is below.
$w( “#dropdown3” ).onChange((event3) => {
let a = $w( “#dropdown2” ).value;
let b = $w( “#dropdown3” ).value;
$w( “#dataset2” ).setFilter() // Resets the Filter
$w( ‘#dataset2’ ).setFilter(wixData.filter().eq( “A” , a)) // Filters Column A for a
.then(() => {
$w( ‘#dataset2’ ).setFilter(wixData.filter().eq( “B” , b)) //Filters Column B for b
})
. then(() => {
let c = $w( “#dataset2” ).getCurrentItem().C; // Retrieves the data in Column C
console.log(c);
$w( “#text29” ).text = c;
})
})
This is not working for me. I was not able to find information on filtering two different columns of data in the documentation. Am I on the right track? Any input to help me is greatly appreciated.
@tony-brunsman
The setFilter command is not cumulative unless you set it up that way using conjunctions like “or” and “and”. The second setFilter on “B” becomes the only filter in effect. It’s as if you didn’t issue a setFilter on “A”.
You might try this instead:
$w("#dropdown3").onChange((event) => {
let a = $w("#dropdown2").value;
let b = $w("#dropdown3").value;
$w('#dataset2').setFilter(wixData.filter()
.eq("A", a)
.eq("B",b)
)
.then(() => {
let c = $w("#dataset2").getCurrentItem().C;
console.log(c);
$w("#text29").text = c;
})
})
@tony-brunsman thank you very much! That code worked. Thanks for teaching me what I did wrong!
One more question: I have a a total of 4 drop downs on this menu for user using, the code for #dropdown 3 is above. If the user makes a change to #dropdown2, I want the code to re-check / re-run the filter on #dropdown3 as well since input from both #dropdown2 and #dropdown3 go into the filter for the output “c”. How can I make it do that? Do I need to do another .onChange event? Currently, my code is:
$w("#dropdown2").onChange((event2) => {
let myc = $w("#dropdown2").value;
console.log(myc);
$w("#dataset2").setFilter(wixData.filter()
.eq("modelYearCode", myc))
.then(() => {
let ModYr = $w("#dataset2").getCurrentItem().modelYear;
console.log(ModYr);
$w("#text28").text = ModYr;
})
})
$w("#dropdown3").onChange((event) => {
let a = $w("#dropdown2").value;
let b = $w("#dropdown3").value;
$w('#dataset2').setFilter(wixData.filter()
.eq("modelCode", b)
.eq("modelYear2", a)
)
.then(() => {
let c = $w("#dataset2").getCurrentItem().modelName;
console.log(c);
$w("#text29").text = c;
})
})
You could set up a separate function that gets called from the various dropdown onChange events (functions). Have that one function handle all of the variations of what the user could do.
@tony-brunsman Could you show an example of this type of function?
Here is a link to my working site to see what I am trying to do: https://aircooledevolution.wixsite.com/classic/chevrolet-1946-1952