Filter a dropdown from a reference collection

Discussion Ask a question
,
1

I have

  1. dropdown1 is populated from a field1 in a collection1 referenced into the main collection2
  2. dropdown2 is populated from a field the main collection2 and needs to submit data

I need to filter dropdown2 to a limited set of items from the dropdown1 item choice

collection1 has the field1 and field2 that correlate with a field2r in collection2, field2r is also the referencing field, so no subfields are required.

I managed to get the code queens conditional filtering with two unique dropdowns to work fine. However this will not allow me to submit data as i need to add the reference field and not the collection1 field.

Can this work with the wix code framework or should i not use reference fields and use some other paradigm?
If it can work how can this be achieved is there a guide on how to do this?

2

Filter a dropdown from a reference collection…something like this…

export function dropdown1_change(event, $w) { //“dropdown1” is the name of your first dropdown, change as necessary

    wixData.query("collection2") 

        .contains("collection2FieldKey", $w("#dropdown1").value) 

        .limit(1000) 

        .ascending("collection2FieldKey") 

        .find() 

        .then(results => {

const uniqueTitles = getUniqueTitles(results.items);

            $w("#dropdown2").options = buildOptions(uniqueTitles);  //here we set the dropdown options for dropdown2, change dropdown2 name as necessary 

        });

//we remove all duplicate results

function getUniqueTitles(items) {

const titlesOnly = items.map(item => item.collection2FieldKey);

return [… new Set(titlesOnly)];

    }

function buildOptions(uniqueList) {

return uniqueList.map(curr => {

return { label: curr, value: curr };

        }); 

    } 
}
3

Thanx for your quick reply, is the airport name = collection2FieldKey as I am getting a dropdown populated with the _id instead of the reference label.

4

corrected above

1 Like
5

@mikemoynihan99 thanx, I am still getting the id from the reference collection rather than the label in my dropdown.

6

@serratabanksia
can you elaborate

1 Like
7

Hi Mike,
Yes I couldnt get the code you provided to populate the dropdown2 at all, so i tried making a search tesybox to replace dropdown1 instead and at least it populates the dropdown2 with the speciesData reference field’s id, it makes the id the label so i am thinking it is something wrong with the mapping. I did a console log and i can see only the main collection reference fields as IDs along with the normal text fields.

note:
none of the dropdowns are connected to a dataset though i have the Avian_Data collection linked on the page its not being used by the inputs.

//species
export function inputSpecies_change(event) {

//Add your code for this event here:
wixData.query(“Avian_Data”)
.contains(“speciesData”, $w(“#inputSpecies”).value)
.limit(1000)
.ascending(“speciesData”)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
console.log(results);
$w(“#dropdownTaxonSpecies”).options = buildOptions(uniqueTitles);

    });

//we remove all duplicate results
function getUniqueTitles(items) {

const titlesOnly = items.map(item => item.speciesData);
return [… new Set(titlesOnly)];

}

function buildOptions(uniqueList) {

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

    }); 

}
8

_id:
“c1ad9526-3ec0-40ea-9939-85c0156164e5”
_owner:
“fcf04fb6-c9c5-49c4-b1b5-bbf98700c1c0”
_createdDate:
“2019-01-07T13:29:32.843Z”
_updatedDate:
“2019-01-07T13:32:14.503Z”
image:
“wix:image://v1/fcf04f_1a6bd7dfa663436ea2239a33daab3f53~mv2_d_5388_3148_s_4_2.jpg/Diamond-Firetail_Stagonopleura%20guttata_M.jpg#originWidth=5388&originHeight=3148”
locations:
“ff22e0da-7744-45c4-a93c-e4adec82cebf”
usersData:
“3da41710-39db-4458-a605-8a84f295d9af”
speciesData:
“06cfbcfc-cdde-4a7c-a66b-5567b05894e7”
avg:
4.2
numRatings:
5
totalRatings:
21
comments:
“

ssdd

”
date:
“2019-01-06T15:00:00.000Z”
link-Avian-Data-Description:
“/Avian-Data/c1ad9526-3ec0-40ea-9939-85c0156164e5”

9

hth, it’s the console.log output of the results of the query on the Avian_Data collection

10

@mikemoynihan99 sorry, to confuse, no i changed to just searching on a textbox as i couldnt get any results from using a dropdown to search for a match.

11

what do you get when you console.log(uniqueTitles)

12

@mikemoynihan99 oh i get just a list of Ids it varies depending on what i type, the textbox is findingmatches based on the letters i type, however the matches seem to be inside the ids.

Array(11)
0:
“06cfbcfc-cdde-4a7c-a66b-5567b05894e7”

1:
“3b08f655-c7b2-441f-bf52-37b07ad0fa23”

2:
“5b7358be-cbc8-4e12-9840-3873e5d19500”

3:
“5ccbc4c7-7125-4f17-856d-65f22922326a”

4:
“82470707-0854-47c2-b64b-6e33b80159df”

5:
“89efc51e-3dbf-4368-8d16-9130b7dfd25c”

6:
“bf60c8d7-a9fc-4d00-99c7-c7231ebe9de7”

7:
“c7844757-d93b-4420-89d5-e1a8bd4f072d”

8:
“d0c5a9aa-4c8e-4370-aaf0-0b832ab73d60”

9:
“e631f87c-6653-4214-a0a9-cacacbe8c78f”

10:
"fc741a00-e29d-4aca-a60b-415f96059b0c

13

@serratabanksia

This is the text you have stored in fieldKey " speciesData ".

Is there some other column in your database that your wanting to populate the dropdown with ?

14

hi, so i am trying to use the reference collection so i can use the same drop down to add new entries. Maybe I am not using reference collections how they are supposed to be used?

1156Ă—831 46.9 KB

15

here is the speciesData’s collection, called species

1003Ă—752 18.2 KB

16

the above code will Filter a dropdown from a reference collection…

what this means is that when you type some text into dropdown1 it will search the filedKey column in your collection.

if any of the results match the text you have typed into dropdown1 it will the gather them in a list and display them in dropdown2

1 Like
17

@mikemoynihan99 Hi Mike, that is great however I was getting the id from the reference collection and not the label returned.

18

Hi @serratabanksia ,

Would you be willing to share your final code so it would be possible to see the way it is implemented?
Cheers!