Hi,
I am facing the following problem:
I have a number of filters that get all populated using unique values from a collection. The code works fine for strings, however if the values are numbers, I get an error message
here is the code:
// Create dropwdown based on input category and name of the dropdown
function createDropdown(category, dropDownName) {
wixData.query(“Wedding_Database”)
.limit(1000)
.ascending(category)
.distinct(category)
.then(results => {
let distinctList = buildOptions(results.items);
// Add “All” to the existing list
distinctList.unshift({ “value”: ‘’, “label”: ‘All’ });
// build the unique elemnt list
$w(dropDownName).options = distinctList;
});
}
function buildOptions(items) {
return items.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return { label: curr, value: curr };
});
}
As said, for strings, this works perfectly and the dropdown is populated. however if the colujmn “category” in the collection contains number, I get an error message. Any idea what I am missing? I tried to convert the number to a string however also failed.
Have you seen the previous post and examples for this here.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/remove-duplicates-from-connected-dropdown-options
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-remove-duplicates-from-connected-dropdown-options-using-distinct-query
Wix Code Tutorial | How to Remove Duplicates From Dropdown Using Wix Code
Also when you use the Dropdown API and the options function, then note that it must be of string type.
https://www.wix.com/corvid/reference/$w.Dropdown.html#options
https://www.wix.com/corvid/reference/$w.Dropdown.html#Option
Option
An object used by the options property that contains the attributes of a dropdown list item.
See Also
options , value
Syntax
type Option = {
value: string
label: string
}
value string
The value of the dropdown option. This is what you use in code and is what is stored in your collections.
label (Optional)
string
The label of the dropdown option. This is what a user sees.
So string will work for you whereas numbers won’t, however you can try converting the numbers to strings, although you have said that you have tried that.
Otherwise, you will just have to change the number fields to text fields so that they are set as one, two, three instead of 1, 2, 3.
In javascript there is a function that turns numbers to strings called .toString(), it works like this:
var num = 15;
var n = num.toString();
console.log(typeof num, typeof n); //output: number, string
Hi,
I code the code from all the examples, however I didn’t find anything with numbers.
I treid toString but failed, now I managed to do it, thanks to you.
This here works
function buildOptions(items) {
return items.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return { label: curr.toString(), value: curr.toString() };
});
}
I am still confused that with javascript the variable are not inside the brackets, I would expect something like toString(num), that was my mistake
so thanks a lot, this is solved now!!!
I saw a bunch of different answers out here about how to populate a dropdown with a unique set of value. My solution was to establish a temp table that I would clear (.truncate) onReady, query my collection I want my values from, and then write them to my temp table (IPTOOLS) in this case. Hope this helps someone… I know there are ways to do this with code only and not having to go to a second temp collection, but this kept things clean for me and minimized my code as I’m intermediate at best…
import wixData from ‘wix-data’ ;
$w.onReady( function () {
wixData.truncate( “IPToolS” )
wixData.query( “IPTool” )
.distinct( ‘manager’ )
.then((results) => {
let items = results.items;
let count = Number(items.length)
for ( var i = 0 ; i < count; i++) {
wixData.insert( “IPToolS” , { “manager” : items[i]})
}
});
//////////////End Query/////////////////////////
///END OF onReady
});