I’m struggling to fix the dropdown where I can’t able to see the items from my database that I created.
I exactly follow the tutorial from Code Queen on Youtube but I can’t make it work. I tried to create and connect my dropdowns in a dataset and “console.logged” all the possible area where the problem was but it’s all undefined. It’s been 2 days now and I have no idea how to fix it. So if anybody knew any effective solution for this I would greatly appreciate it!!
Collection Name: namecard
Dropdown 1: #material (onChange: material_change)
Dropdown 2: #lamination (onChange: lamination_change)
Both connected to dataset then dataset connected to namecard collection
import wixData from 'wix-data';
$w.onReady(function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query("namecard")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#material").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.fieldkey);
console.log(titlesOnly); //Test the array variable
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function material_change(event, $w) {
uniqueDropDown2();
$w("#lamination").enable();
}
function uniqueDropDown2 (){
wixData.query("namecard")
.contains("fieldkey", $w("#material").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#lamination").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.fieldkey);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
