[SOLVED]: Adding "Any" option to my dropdown menus which pull the options from a database as unique items?

Ask the community
,
1

Hello.
I cannot stress how much help I need at the moment.
I have a couple of dropdown menus which I use to filter a repeater. The options in each drop down are directly pulled from my main database and are displayed as unique values (non-duplicates).

The only thing I need to do in order to complete this project of mine is to add an “Any” option to the dropdowns. I have no idea how to do this just through code. Once again, the dropdown options are pulled directly from my main database and set as unique items to remove the duplicates.

I would REALLY appreciate help asap, as the only thing I need to do is add the “any” option somewhere in this code, with its value being 0 since basically this option shouldn’t filter anything. (My dropdowns filter after you click on a search button). Here’s my messy, ducktaped-together code. Please help me :frowning:

import wixData from ‘wix-data’ ;

//start of JobField dropdown - work please i beg of

$w . onReady ( function () {

wixData . query ( “jobpostings” )
. limit ( 1000 )
. find ()
. then ( results => {

const uniqueItems = getUniqueItems ( results . items );
$w ( “#countryDropdown” ). options = buildOptions ( uniqueItems );

const uniqueItems2 = getUniqueItemsLoc ( results . items );
$w ( “#companyType” ). options = buildOptions ( uniqueItems2 );

const uniqueItems3 = getUniqueItemsType ( results . items );
$w ( “#employment” ). options = buildOptions ( uniqueItems3 );

});
//---------------------------------------------------------//

function getUniqueItems ( items ) {
const itemsOnly = items . map ( item => item . field );
return [… new Set ( itemsOnly )];

}

function getUniqueItemsLoc ( items ) {
const itemsOnly = items . map ( item => item . location );
return [… new Set ( itemsOnly )];

}

function getUniqueItemsType ( items ) {
const itemsOnly = items . map ( item => item . type );
return [… new Set ( itemsOnly )];

}

function buildOptions ( uniqueList ) {
return uniqueList . map ( curr => {
return { label : curr , value : curr };

});

}

});

// end of jobField dropdown - please work i beg of you

export function input1_keyPress ( event ) {
let SearchValue = $w ( “#input1” ). value ;
$w ( “#dataset1” ). setFilter ( wixData . filter (). contains ( ‘jobTitle’ , SearchValue )
. or ( wixData . filter (). contains ( ‘location’ , SearchValue ))
. or ( wixData . filter (). contains ( ‘field’ , SearchValue )));

}

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

function search () {

wixData . query ( “jobpostings” )
. contains ( “field” , String ( $w ( “#countryDropdown” ). value ))
. and ( wixData . query ( “jobpostings” ). contains ( “location” , String ( $w ( “#companyType” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “type” , String ( $w ( “#employment” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “remote” , String ( $w ( “#checkboxGroup1” ). value )))

. find ()
. then ( results => {
$w ( “#repeater4” ). data = results . items ;
});

}

// =============================================//

$w . onReady (() => {

$w ( ‘#clearButton’ ). onClick (() => {
$w ( “#countryDropdown” ). value = undefined
$w ( “#companyType” ). value = undefined
$w ( “#employment” ). value = undefined
$w ( “#checkboxGroup1” ). value = undefined
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. eq ( ‘field’ , location ))

});

});

Have a lovely day,
-D

2

As far as I know, If you want to add a field to a dropdown, you need to fill the dropdown manually, including the values that you can pull from a collection.
A dropdown can get a jsons array as a source, when every json has “label” (the string seen in the dropdown) and a “value” (well, the value).

For example:

const res = await wixData . query ( “jobpostings” )… // do all you sortings

and then:

let arr = [];

for ( let i = 0 ; i < res . items . length ; i ++)
arr . push ({ “label” : res . items [ i ]. title , “value” : res . items [ i ]. _id });

and then you aplly your “any” item:

arr . push ({ “label” : “Any” , “value” : “0” });

$w ( ‘#dropdown1’ ). options = arr ;

3

Although I deeply, with all my heart, appreciate the answer (super happy i got a comment!) - I have no idea how to implement this to my code. I’ve basically been looking at youtube videos, putting together different codes and it somehow worked out.

Trying to go through my code in order to figure out where/how to add this so that I can finally manually add the “Any” option to my dropdown including the options it pulls from the database.

I’m at the end of my nerves at this point, have barely slept trying to finish this, but I will not give up!

EDIT: Okay so If I got it right, I still have to manually add my dropdown options through code in order to be able to add an additional field “Any”? How would I do this? Which snippet from the ones listed above would I have to copy/paste and modify in order to list them?

EDIT2: SOLVED! Replaced the function that builds the unique ite,s

function getUniqueItems ( items ){ const itemsOnly = items . map ( item => item . field ); return [… new Set ( itemsOnly )];}

Replaced that above with:

function getUniqueItems () {
wixData . query ( “jobpostings” ). limit ( 1000 ). ascending ( “field” ). distinct ( “field” ). then (( results ) => {
let distinctList = results . items . map ( element => { return { label : element , value : element };})
distinctList . unshift ({ “value” : “” , “label” : “Any” })
$w ( “#countryDropdown” ). options = distinctList
})
}

And it works!