Sorting a dropdown

Ask the community
,
1

Hi I was wondering how to sort all the elements from a dropdown which is being populated by the populateDropdown option.

I tried this but with no results:

$w(“#dataset1”).setSort(wixData.sort()
.ascending(“lastname”)
);

Thanks

2 Likes
2

Hey
Is the dropdown connected to that dataset and the lastname is the value displayed inside the dropdown?

Another solution would be the below

import wixData from 'wix-data';
export function populateDropdown(collectionName) {
 let allItems = [];
 return wixData.query(collectionName)
    .ascending("lastname")
    .find()
    .then((results) => {
    if (results.totalCount > 0) {
       let items = results.items;
       items.forEach((item) => {
          let oneItem = {
             label: item.title,
             value: item._id
          }
          allItems.push(oneItem);
       })
       return allItems;
    } 
    return null;
    })
}

And the in your page and the onReady function you call it to your dropdown like this

$w("#dropdown1").options = await populateDropdown("data collection name");

Remember to add the async in the page onReady to make the await work.

3

Works like a charm!

Thanks Andreas

4

I want to display the dropdown list in alphabetical order. The dropdown list is connected with dataset. I have tried to sort the sandbox data a-z but the live data is still in old-new order.
Can you help me?

5

@lion1992416

$w.onReady( function() {
$w("#dataset1").onReady( () => {  
let options = $w("#dropwdown1").options;
options.sort(function(a, b) {
let labelA = a.label.toUpperCase(); 
 let labelB = b.label.toUpperCase();
  if (labelA < labelB) {
    return -1;
  }
  if (labelA > labelB) {
    return 1;
  }
  return 0;
});
$w("#dropwdown1").options = options;
})
})
6

@jonatandor35 what do i have to put in dataset1? where can I find it?

7

dropdownlist is connected with dataset and display the dataset named city

8

@lion1992416 If the dataset property id is “city”, so use #city instead of #dataset1. (Only the property id is relevant not the dataset name).

9

@jonatandor35 when I console options of dropdownlist, it shows Vanilla, Chocolate, StrawBerry and so on. Not the data from dataset. and I can not find the property id of the city dataset

10

@lion1992416 so apprently you haven’t connected the dropdown to the dataset via the editor. try to do it first.
To see the property id, select (a single click) the dataset.

11

@jonatandor35 it has been connected really. and displays data but randomly

12

I think I have to change the order of the collection “cities” in the dataset but can not change it

13

@lion1992416 there’s no reason to change the order in the collection itself.
You can either sort it in the query as Andreas suggested above, or sort it using JavaScript (my code above).

14

@jonatandor35 please come to my computer and help me

15

@lion1992416 I don’t have an access to your computer… and you shouldn’t give an access to strangers…

16

@jonatandor35 haha, I do not feel you are a stranger, anyway you tried to help me so appreciate it.
736618134 my anydesk, please come in and take a look and help if you can

17

hello I have done it, your code helps me a lot

18

You are great.

19

Thank you very much

20

@lion1992416 you’re welcome. glad to help.