Duplicates in Drop-down

Ask the community
,
1

Greetings Everyone!

I’m trying to build a Wix site for an event for my non-profit organisation. I used the video tutorial by WIX to build up the code for searching and sorting a name list via Drop-down box.

Search Works Fine!
Dropdown works but it has multiple entries of the categories, I really would appreciate your help!

Below is my code:
import wixData from ‘wix-data’ ;

$w.onReady(() => {
wixData.query( ‘recipientlist’ )
.limit( 25 )
.find()
.then(res => {
let options = [{ “value” : ‘’ , ‘label’ : ‘All Categories’ }];
options.push(…res.items.map(dropdown => {
return { ‘value’ : dropdown.cat, ‘label’ : dropdown.cat};
}));
$w( ‘#catdropdown’ ).options = options;
})
});

let debounceTimer;
let lastFilterName;
let lastFilterCat;

export function inputsearch_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w( ‘#inputsearch’ ).value, lastFilterCat);
}, 100 );
}

function filter(name, cat) {
if (lastFilterName !== name || lastFilterCat !== cat) {
let newFilter = wixData.filter();
if (name)
newFilter = newFilter.contains( ‘name’ , name);
if (cat)
newFilter = newFilter.eq( ‘cat’ , cat);
$w( ‘#dataset1’ ).setFilter(newFilter);
lastFilterName = name;
lastFilterCat = cat;
}
}

export function catdropdown_change(event, $w) {
filter(lastFilterName, $w( ‘#catdropdown’ ).value);
}

Let me know if you guys need any additional information.
Hope to hear back from this smart community!

Thank you in advance.

2

@kesavan Have a look at the distinct function that was introduced in the last year, probably after the tutorial was put together.

3

@anthonyb Thank you for the immediate response! But I’m not a programmer, I would need some guidance on how to alter the code I have which could eliminate the duplicates.

Any idea?

4

Anthony gave you already the answer. Seems as if you did not look into the given link by Anthony.

I just did it and found this one…

query.distinct("state")
2  .then( (results) => {
3    if(results.items.length > 0) {
4      let items = results.items;
5      let firstItem = items[0];
6      let totalCount = results.totalCount;
7      let pageSize = results.pageSize;
8      let currentPage = results.currentPage;
9      let totalPages = results.totalPages;
10      let hasNext = results.hasNext();
11      let hasPrev = results.hasPrev();
12      let length = results.length;
13      let query = results.query;
14    } else {
15      // handle case where no matching items found
16    }
17  } )
18  .catch( (error) => {
19    let errorMsg = error.message;
20    let code = error.code;
21  } );

Of course you have to modify it a little bit for your won project.

5

A little trial and error based on the distinct function documentation was what I assumed or hoped that you would do, but alas this is a brand new world to you …

$w.onReady(() => {
    wixData.query('recipientlist')
    .distinct("cat")
    .then(res => {
      let options = [{"value": '','label': 'All Categories'}];
      options.push(...res.items.map(dropdown => {
          return {'value': dropdown, 'label': dropdown};
      }));
      // To sort the dropdown values
      options.sort((a, b) => (a.label > b.label) ? 1 : -1);
      $w('#catdropdown').options = options;
    })
});
6

a shorter option:

$w.onReady(() => {
    wixData.query('recipientlist')
    .ascending("cat")
    .distinct("cat")
    .then(r => {
      let options = r.items.map(e => ({label: e, value:e}));
      options.unshift({label:"All", value: "all"});
      $w('#catdropdown').options = options;
      $w('#catdropdown').value = "all";
    })
});
7

@tony-brunsman & @J.D. Great thanks a lot! it works like a charm

8

@jonatandor35
Interesting solution. I often see you using this map-command, seems to be something universal, what can be used in many cases. I should take a look at this. :grin:

$w.onReady(() => {
    wixData.query('recipientlist')
    .ascending("cat")
    .distinct("cat")
    .then(r => {
      let options = r.items.map(e => ({label: e, value:e}));
      options.unshift({label:"All", value: "all"});
      $w('#catdropdown').options = options;
      $w('#catdropdown').value = "all";
    })
});
9

@russian-dima yes.
The JS map() method is very useful.
you can always use the .forEach() method instead, but it’s longer and also considered to be slower.
P.S if you use .forEach() it’d be something like:

 let options = [];
r.items.forEach((e, index) => {options[index] = {label: e, value:e}});