How to create dropbox/checkbox options from a database array/tags field?

Ask the community
,
1

I am very new to coding so I would really need help to get a code for this topic.
In my database, I have an array field “multiCity” to put in all the cities that a provider operates in.
For example, provider A has [“New York”, “Boston”, “Las Vegas”]
provider B has [“New York”, “Boston”, “Dallas”]
provider C has [“New York”, “San Diego”, “Dallas”]

I would like to build a dropbox or checkbox that has unique option, and then I can set a filter button to filter out my repeater base on user selection.
I could only successfully get options for dropbox/checkbox if the database field is a string (like text) field. (codes showing bellow)
When i change the field back to array or tags, i will receive this error:
Wix code SDK error: The label parameter of item at index 0 that is passed to the options method cannot be set to the value New York,Boston,Las Vegas. It must be of type string

Please help me to understand how I can populate this dropbox/checkbox with array or tags field in database.
Thank you!

import wixData from ‘wix-data’ ;

$w.onReady( function () {
uniqueDropDown1();
});

function uniqueDropDown1 (){
wixData.query( “AllProviders” )
.limit( 1000 )
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w( “#multicitydropdown” ).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.multiCity);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

2

Hey,

If you’re setting up a filter for your database collection content we have a tutorial that will help you out.

Corvid Tutorial: Adding Collection Data Search Functionality

This tutorial uses a table instead of a repeater so you will have to change some things to suit your needs.

The repeater API reference should help you out with that.

Hope this helps!

Dara | Corvid Team

3

Thank you! This is exactly what i am looking for.
Need to make a slight change in the code at the end.
I am pasting my code here in case anyone else needs it.

//code for array options dropdown
function loadOptions() {

// Run a query that returns distinct items in the collection
wixData.query( “AllProviders” )
// Set the course as the field that must be distinct
.distinct( “multiCity” )

.then(results => {
// Call another function to reformat the distinct items
// the way the dropdown element expects
let distinctList = buildOptions(results.items);

// Use unshift() to add another dropdown option at
// the beginning of the array, in the correct format
distinctList.unshift({ “value” : ‘’ , “label” : ‘All Cities’ });

// Set the options of the dropdown
$w( “#multicitydropdown” ).options = distinctList;

});

}

//THIS PART IS SLIGHTLY DIFFERENT FROM WIX CODE
function buildOptions(items) {
return items.map(currentItem => {
return {
label:currentItem, value:currentItem
};
});
}
$w.onReady(() => {

loadOptions();
});