Trying to make cool Filter

Ask the community
, ,
1

Hi.

Trying to create database of actors. And want to make filter on my web-site, so when someone come in he/she could filter database by age, hair color, experience and so on. For that I’m trying to use radio buttons, and button filter. Code looks like this:

let age = $w("#age").value; //want to store value of radio button "age" 
let hairColor = $w("#hairColor").value; //want to store value of radio button "hair color"

//here trying to find and show results to the gallery, that already exists on web-page.
export function filterBtn_onClick() {

wixData.query("Users") 
.between("age", 18) 
.contains("hairColor", hairColor) 
.find() 
.then( (results) => { 
	let resultQuery = results.query; 
}) 
.catch( (error) => { 
let errorMsg = error.message; 
let code = error.code; 
});

}

I’m not very good at coding (at all). Know that something is wrong with it, but can’t figure it out myself. Please help.

Thanks

2

Hi,
I recommend checking out this video tutorial . Moreover, you can check this thread for filtering repeater using multiple user inputs.

Good luck,
Tal.

3

Thanks Tal.

Video that you’ve gave, really helped.

But in drop-down it takes all the options that are written in database items. For example, I want in drop-down as options only male and female, but it gives as much male and female options as much they are in gender column in database.

Also it gives this error:

1016×232 4.13 KB

Here is my code:

import wixData from “wix-data”;

$w.onReady(() => {
loadUsers();
});

let lastFilterTitle;
let lastFilterUsers;
let debounceTimer;
export function iTitle_keyPress($w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value, lastFilterUsers);
}, 500);
}

export function genderDropDown_change($w) {
filter(lastFilterTitle, $w(‘#genderDropDown’).value);
}

function filter(title, users) {
if (lastFilterTitle !== title || lastFilterUsers !== users) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘title’, title);
if (users)
newFilter = newFilter.contains(‘gender’, users);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterTitle = title;
lastFilterUsers = users;
}
}

function loadUsers() {
wixData.query(‘Users’)
.find()
.then(res => {
let options = [{
“value”: ‘’,
“label”: ‘All’
}];
options.push(…res.items.map(users => {
return {
“value”: users.gender,
“label”: users.gender
};
}));
$w(‘#genderDropDown’).options = options;
});

}

So, generally it does what I want, but would be good to solve that little issues.

Thank you,
Nodar.

4

Hey Nodar,

Regarding the errors, it seems that the signature of your event handlers is the cause.
Instead of iTitle_keyPress($w), use either the default iTitle_keyPress(event, $w) or a simple iTitle_keyPress()
Doing iTitle_keyPress($w) means you get an event object into your $w variable, and that triggers errors.

Regarding the multiple options, you can run some logic to make sure the array of options you create contains only unique values.
For example:

function unique(array) {
    return array.filter((value, index) => array.indexOf(value) === index);
}

const genders = res.items.map(users => users.gender);
const uniqueGenders = unique(genders);
const options = uniqueGenders.map(gender => {
	return {
		"value": gender,
		"label": gender
	};
})

Good Luck,
Itai

5

Thanks Itai, for your replay.

Problem regarding the error was solved.

About multiple options: Can you tell me where should I put your code? Because it says that ‘res’, in:

const genders = res.items.map(users => users.gender);

is undefined, and that the options in:

const options = uniqueGenders.map(gender => {

is unread.

Thanks
Nodar.

6

The code I sent is partial.
You should put it inside your loadUsers function, in the part where you set the options of the dropdown.
Your last line, $w(’ #genderDropDown ').options = options; should stay in place, to actually set the options we created to the dropdown.

7

Yes, it worked.

Thanks a lot.

8

Hi Nodar!
Could you please show me your final code with Itai’s “unique function”?
'Cause I’m here trying to guess where you put it but it’s not working for me :frowning: New at coding here!

9

Hi Marina

Overall code consists of information, that might confuse you, that’s why here is the code you want exactly:

wixData.query('Users')  
.find() 
.then(res => { 
	function unique(array) { 
	    return array.filter((value, index) => array.indexOf(value) === index); 
	} 
	
	const genders = res.items.map(users => users.gender); 
	const uniqueGenders = unique(genders); 
	const options = uniqueGenders.map(gender => { 
		return { 
			'value': gender, 'label': gender 
		}; 
	}); 
	$w('#genderDropDown').options = options; 
});

So, this was my code before:

wixData.query("Users") 
.between("age", 18) 
.contains("hairColor", hairColor) 
.find() 
.then( (results) => { 
	let resultQuery = results.query; 
}) 
.catch( (error) => {

let errorMsg = error.message;
let code = error.code;
});
}

Put Itai’s code after:
.then(results) => {
Itai’s code.