I created a page with a dataset, a repeater, some text fields, an image frame, etc. to display the contents off a dataset. I added a drop down and connected it to the “states” field of the data set. Therefore, when the user clicks the dropdown, all of the states are displayed. When a state is selected, all of the fields on the page are connected to different elements of the dataset and they all change to display the information in the row for the selected state.
The first time that the dropdown is selected, everything works fine. The second time the dropdown is selected, the list only shows one state “the last state that was selected”.
Code
import wixData from ‘wix-data’;
$w.onReady( function () {
//TODO: write your page related code here…
});
export function dropdown1_change(event) {
let searchValue = $w(‘#dropdown1’).value; //Add your code for this event here:
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘state’, searchValue)
);
}
In order to reset the dropdown list I had to add a button that resets the dataset filter.
Code
export function button1_click(event) {
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘state’, “”) )//Add your code for this event here:
}
@setneupm I suspect that you are using the same dataset for the drop down that you are using in the filter. Namely $w(’ #dataset1 '). When you apply the filter the dataset will essentially throw away its contents and replace it with the result from the filter. Any element that is bound to the dataset will be updated after the filter completes. This includes the drop down.
So you have number choices:
-
Use a duplicate dataset attached to the same data collection that isn’t reset by the filter.
-
Extract the column data that you need in the drop down from the dataset before it gets filtered. You can do this in the $w.onReady() function using the $w(‘#dataset1’).onReady() function. Then build the drop down object array from the results.
Option 1 is probably the easiest solution.
Code for the second solution will look something like this:
$w.onReady(() => {
$w('#dataset1').onReady(() => {
$w('#dataset1').getItems(0, $w('#dataset1').getTotalCount())
.then((results) => {
// Map the items into our options array
let options = results.map((item) => {
let option = {};
option.label = item.state;
option.value = item.state;
return option;
});
$w('#dropdown1').options = options;
});
});
}
Good luck
Steve
@stevendc ,
Thanks for your reply! I actually tried option one and it worked beautifully. I am going to try option two when I get a little time, because that is essentially what I was trying to do.
I really appreciate your help with this!
Regards!
@stevendc ,
I disconnected dropdown1 from the duplicate dataset and then I tried the code. I got the following console error:
Wix code SDK error: The options parameter that is passed to the options method cannot be set to the value [object Object]. It must be of type array.
It referenced line 14 in the code:
$w('#dropdown1').options = options;
@setneupm Hi my bad I made a mistake in the code I provided. Having said that this is a great opportunity to show you how to figure this sort of issue out.
The first question is why did the error occur?
Well I used the wrong property in the array map call:
let options = results.map((item) => {
Basically results is not an array it is an object. Let’s take a look at the dataset API. The getItems() function is defined like this:
function getItems(fromIndex: number, numberOfItems: number): Promise<GetItemsResult>
Importantly the result that I access in the .then() function is of type GetItemsResult. This looks like this:
type GetItemsResult = {
items: Array<Object> <<< This is the Array we need to work on
totalCount: number
offset: number
}
So my error was forgetting that the result to be processed in the then() call contained the returned data array in a property called items.
So the fix to the code is as follows:
$w('#dataset1').getItems(0, $w('#dataset1').getTotalCount())
.then((results) => {
// Map the items into our options array
// Use the correct ---vvvvv--- results property!
let options = results.items.map((item) => {
...
Hope this helps
Steve
@stevendc ,
WOW! Thank you for the personal lesson! That is very generous of you.
I really appreciate you taking the time to walk me through the code. This is the kind of help that keeps on giving. I will study it and look up the API reference links you provided and try it again.
Thanks again!
Regards,