I am caught in a web. I am unable to populate dropdown2. The code works until 'label': 'Select Application'. I was wondering what to type under res.items.map. I have typed the collection name which is named Application.
import wixData from 'wix-data'; export function dropdown1_change_1(event, $w) { wixData.query('Application') .eq('authorityid', $w("#dropdown1").value) .find() .then(res => { let options = [{ "value": '', 'label': 'Select Application' }]; options.push(...res.items.map(application => { return { 'value': application.title, 'label': application.title }; })); $w('#dropdown2').enable(); $w('#dropdown2').options = options; }); }
Correct, you'll need to change your query.
The reference field acts as a connector to other collections. For more information, see the articles on Reference Fields.
I realised the mistake. The Reference field only stores an Unique ID Value and not a text as displayed in the collection. I am now wondering how the reference field actually works.
Thanks for the hint
The collection has data
Is there an issue using a reference field?
.eq('authorityid', $w("#dropdown1").value)
The authorityid used above is a reference field type
The query results are empty. Either your collection is empty, or your query is incorrect.
This is what came up in the log
{"items":[],"length":0,"totalCount":0,"query":{"invalidArguments":[],"filterTree":{"$and":[{"authorityid":"Dept of Economic Development"}]},"provider":{},"collectionName":"Application","limitNumber":50,"included":[]}}
Maybe your database query didn't return anything. You can add a console.log(res) statement inside the .then() function to see if anything was returned. Like this:
.then(res => { console.log(res);
You can then see what, if anything, the query returned.
Thanks for trying to assist Yisrael. I definitely need your help :-)
Well, the dropdown2 does not populate from the collection. It just shows the 'Select Application' label
The same what? I am unable to help if I don't know what the problem is.
Hi Yisrael,
But it made no impact. Still the same.
import wixData from 'wix-data'; export function dropdown1_change_1(event, $w) { wixData.query('Application') .eq('authorityid', $w("#dropdown1").value) .find() .then(res => { let options = [{ "value": '', 'label': 'Select Application' }]; options.push(...res.items.map(application => { return { 'value': application, 'label': application }; })); $w('#dropdown2').enable(); $w('#dropdown2').options = options; }); }
Hi Sunil,
Note the change in the following chunk of code:
return { 'value': application, 'label': application };
You don't say what doesn't work, but I hope this helps,
Yisrael