Add multiple Unique drop downs to a code

krays23 · March 12, 2021, 11:43am

HI

I have this code that i use to create a unique list for the drop down muscleGroupdropdown. which is working fine for one.

How do i add another unique list drop down “exerciseTypedropdown” to this code? where do i place it ? its coming from same data set “Training”

i also want to have those 2 drop downs sorted A to Z and cant figure out where i place the .Ascending sort function the code below.

Thanks

Dan

import wixData from “wix-data” ;

$w.onReady( function () {

wixData.query( “Training” )
.limit( 1000 ) .find()
.then(results => {
const uniqueItems = getUniqueItems(results.items); $w( ‘#muscleGroupdropdown’ ).options = buildOptions(uniqueItems);

});

function getUniqueItems(items) {
const itemsOnly = items.map(item => item.muscleGroup);
return [… new Set(itemsOnly)];
}

function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
});

export function searchButton_click(event) {
$w( ‘#trainingDataset’ ).setFilter(wixData.filter()
.contains( “muscleGroup” , $w( ‘#muscleGroupdropdown’ ).value)
.contains( “exerciseType” , $w( ‘#exerciseTypedropdown’ ).value))

.then((reslts) => {
console.log( “Data is now filtered!” );
$w( ‘#listRepeater’ ).data = reslts.items;
}). catch ((err) => {
console.log(err);
});
$w( ‘#listRepeater’ ).expand();
}

CODE-NINJA · March 13, 2021, 8:33am

Perhaps you can/will find your answer here…
https://www.media-junkie.com/pflegeservice

Take a look onto the ORIGINAL-POST.

And here is an upgraded function…(to be found in action in the given example).

var DropDowns = []
var DATABASE = "yourDatabaseHere"

DropDowns[0] = "xxx"  
DropDowns[1] = "yyy"
DropDowns[2] = "zzz" 

async function uniqueTitles_DropDowns() {console.log("load_UniqueTitles for DropDowns")
   let dbDATA = await wixData.query(DATABASE)
   let Options = []

   for (var a = 0; a < DropDowns.length; a++) {
      if(DropDowns[a]!==undefined && DropDowns[a]!=="undefined" && DropDowns[a]!==null) {
         await dbDATA.distinct(DropDowns[a])
         .then((results) => {
            let items = results.items
            for (var b = 0; b <items.length; b++) {
               Options.push([])    
               Options[a].push({"label": items[b], "value": items[b]})
            }
            $w('#myDropdown'+(a+1)).options = Options[a]
            $w('#myDropdown'+(a+1)).placeholder = DropDowns[a]
         })
      }       
   }   
}

Good luck & happy coding!

krays23 · March 13, 2021, 11:17am

HI @russian-dima

thanks for this. I’ve added the 4 drop downs that i want to have unique lists for but confused as what’s missing from the code now?

ive set all 4 drop down choices to blank / empty no choices i assume thats correct as i want the values from the data base.

if you could show me whats missing id be very grateful.

Does your code still use the search button i created?

Thanks

Dan

import wixData from ‘wix-data’ ;

var DropDowns =
var DATABASE = “Training”

DropDowns[ 0 ] = “PPLdropdown”
DropDowns[ 1 ] = “muscleGroupdropdown”
DropDowns[ 2 ] = “exerciseTypedropdown”
DropDowns[ 3 ] = “equipmentTypedropdown”

async function uniqueTitles_DropDowns() {console.log( “load_UniqueTitles for DropDowns” )
let dbDATA = await wixData.query(DATABASE)
let Options =

for ( var a = 0 ; a < DropDowns.length; a++) {
if (DropDowns[a]!==undefined && DropDowns[a]!== “undefined” && DropDowns[a]!== null ) {
await dbDATA.distinct(DropDowns[a])
.then((results) => {
let items = results.items
for ( var b = 0 ; b <items.length; b++) {
Options.push()
Options[a].push({ “label” : items[b], “value” : items[b]})
}
$w( ‘#myDropdown’ +(a+ 1 )).options = Options[a]
$w( ‘#myDropdown’ +(a+ 1 )).placeholder = DropDowns[a]
})
}
}
}

CODE-NINJA · March 13, 2021, 11:33am

@krays23
Replace the following with your DB-FIELD-IDs…

DropDowns[0]="xxx" ---> "Data-Field-1-ID" = place here one of the DB-Field-IDs in your DB
DropDowns[1]="yyy" ---> "Data-Field-2-ID" = place here one of the DB-Field-IDs in your DB
DropDowns[2]="zzz" ---> "Data-Field-3-ID" = place here one of the DB-Field-IDs in your DB

Rename all your Drop-Downs in a unique way… (beginning with counter —> 1).
“myDropdown1”
“myDropdown2”
“myDropdown3”
“myDropdown4” … and so on…

 $w('#myDropdown'+(a+1)).options = Options[a]             
 $w('#myDropdown'+(a+1)).placeholder = DropDowns[a]

The DATABASE you already have done well, if “Training” is the name of the choosen DB (the refered DB).

krays23 · March 23, 2021, 7:38am

@russian-dima HI

Ive done everything you asked, i believe however i get nothing in the drop downs when i select them and the repeater doesn’t filter obviously.

https://www.yogafitdubai.com/training

Can you tell me where I’m going wrong? and also how they actually filter once selected do i need the search button or it filters as you select each drop down?

i re named all my drop downs as you said to

myDropdown1
myDropdown2
myDropdown3
myDropdown4

import wixData from ‘wix-data’ ;

var DropDowns =
var DATABASE = “Training”

DropDowns[ 0 ] = “ppl”
DropDowns[ 1 ] = “muscleGroup”
DropDowns[ 2 ] = “exerciseType”
DropDowns[ 3 ] = “equipmentType”

async function uniqueTitles_DropDowns() {console.log( “load_UniqueTitles for DropDowns” )
let dbDATA = await wixData.query(DATABASE)
let Options =

for ( var a = 0 ; a < DropDowns.length; a++) {
if (DropDowns[a]!==undefined && DropDowns[a]!== “undefined” && DropDowns[a]!== null ) {
await dbDATA.distinct(DropDowns[a])
.then((results) => {
let items = results.items
for ( var b = 0 ; b <items.length; b++) {
Options.push()
Options[a].push({ “label” : items[b], “value” : items[b]})
}
$w( ‘#myDropdown’ +(a+ 1 )).options = Options[a]
$w( ‘#myDropdown’ +(a+ 1 )).placeholder = DropDowns[a]
})
}
}
}

CODE-NINJA · March 23, 2021, 8:47am

@krays23
I tested this CODE here with my own DATABASE…

import wixData from 'wix-data';

var DropDowns = []
var DATABASE = "Training"

DropDowns[0] = "ppl"
DropDowns[1] = "muscleGroup"
DropDowns[2] = "exerciseType"
DropDowns[3] = "equipmentType"

async function uniqueTitles_DropDowns() {console.log("load_UniqueTitles for DropDowns")
   let Options = []
   let dbDATA = await wixData.query(DATABASE)

   for (var a = 0; a < DropDowns.length; a++) {
      if(DropDowns[a]!==undefined && DropDowns[a]!=="undefined" && DropDowns[a]!==null) {
         await dbDATA.distinct(DropDowns[a])
         .then((results) => {
            let items = results.items
            for (var b = 0; b <items.length; b++) {
                    Options.push([])    
                    Options[a].push({"label": items[b], "value": items[b]})
                }
                $w('#myDropdown'+(a+1)).options = Options[a]
                $w('#myDropdown'+(a+1)).placeholder = DropDowns[a]
            })
        }   
    }
}

Everything works like a charm.

I think what you are missing ist the → starting sequence!

$w.onReady(function() {uniqueTitles_DropDowns()});

This CODE will just fill every of your DropDowns with unique titles from your DATABASE, nothing else.

krays23 · March 23, 2021, 8:55am

@russian-dima

Ok thats great how do i get the repeater to filter?

https://www.yogafitdubai.com/training

I have a search button how can i link the on click to run? unfortunately i deleted my old code …opps that had the on click function in i also need a reset button to rest the 4 filters

import wixData from ‘wix-data’ ;

$w.onReady( function () {uniqueTitles_DropDowns()});

var DropDowns =
var DATABASE = “Training”

DropDowns[ 0 ] = “ppl”
DropDowns[ 1 ] = “muscleGroup”
DropDowns[ 2 ] = “exerciseType”
DropDowns[ 3 ] = “equipmentType”

async function uniqueTitles_DropDowns() {console.log( “load_UniqueTitles for DropDowns” )
let dbDATA = await wixData.query(DATABASE)
let Options =

for ( var a = 0 ; a < DropDowns.length; a++) {
if (DropDowns[a]!==undefined && DropDowns[a]!== “undefined” && DropDowns[a]!== null ) {
await dbDATA.distinct(DropDowns[a])
.then((results) => {
let items = results.items
for ( var b = 0 ; b <items.length; b++) {
Options.push()
Options[a].push({ “label” : items[b], “value” : items[b]})
}
$w( ‘#myDropdown’ +(a+ 1 )).options = Options[a]
$w( ‘#myDropdown’ +(a+ 1 )).placeholder = DropDowns[a]
})
}
}
}

CODE-NINJA · March 23, 2021, 9:08am

@krays23

Did it work for you right now? Do you get unique titles in your dropdowns?
Please use —> CODE-Blocks to show your CODE → (like i do it).
Now you will have to create your own “Filter-Engine” / “Filter-Function”.
And yes you will also have to create a “RESET”-function.

import wixData from 'wix-data';

$w.onReady(function() {
   uniqueTitles_DropDowns()
   $w('#mySerachButton').onClick(()=>{
      start_myFilterEngine();
   });
   $w('#myResetButton').onClick(()=>{
      RESET();
   });
});
var DropDowns = []
var DATABASE = "Training"

DropDowns[0] = "ppl"
DropDowns[1] = "muscleGroup"
DropDowns[2] = "exerciseType"
DropDowns[3] = "equipmentType"

async function uniqueTitles_DropDowns() {console.log("load_UniqueTitles for DropDowns")
 let dbDATA = await wixData.query(DATABASE)
 let Options = []

 for (var a = 0; a < DropDowns.length; a++) {
 if(DropDowns[a]!==undefined && DropDowns[a]!=="undefined" && DropDowns[a]!==null) {
 await dbDATA.distinct(DropDowns[a])
         .then((results) => {
 let items = results.items
 for (var b = 0; b <items.length; b++) {
               Options.push([])    
               Options[a].push({"label": items[b], "value": items[b]})
            }
            $w('#myDropdown'+(a+1)).options = Options[a]
            $w('#myDropdown'+(a+1)).placeholder = DropDowns[a]
         })
      }       
   }   
}

function start_myFilterEngine(){
  // create here your Filter-Engine-Code
}

function RESET(){
  // create here your RESET-Code
}

Good luck and happy coding!

I am here to help you, but not to do the work for you, so right now you will have to continue on your own. I already gave you a free solution for unique-title-dropdowns, the rest you will have to do by your own.

P.S.: You will find a lot of informations, when you read all the given posts in my interactive-example.

https://www.media-junkie.com/pflegeservice

Take also a look onto → “DATABASES”.

krays23 · March 23, 2021, 10:33am

OK thanks

krays23 · March 30, 2021, 11:27am

@russian-dima

I finally did it lol! i created the

Now you will have to create your own “Filter-Engine” / “Filter-Function”.

export function searchButton_click(event, $w) {
   $w("#trainingDataset").setFilter(wixData.filter()

      .contains("ppl", $w("#myDropdown1").value)
      .contains("muscleGroup", $w("#myDropdown2").value)  
      .contains("exerciseType", $w("#myDropdown3").value)  
      .contains("equipmentType", $w("#myDropdown4").value))    

   .then((results) => {
      console.log("Data Is Now Filtered");
      $w("#listRepeater").data = results.items;
      }).catch((err) => {
         console.log(err);
      });
   $w("#listRepeater").expand();
}

I do however get an error in the consol log on line 45 as shown below which is this line of the code $w(“#listRepeater”).data = results.items;

The code runs fine and filters the repeater correctly however i never lik to see an error is there something i have done wrong here?

Loading the code for the Training (All) page. To debug this code, open xlegt.js in Developer Tools.


load_UniqueTitles for DropDowns

Training (All)
Line 13


Data Is Now Filtered

Training (All)
Line 44


TypeError: Cannot read property 'items' of undefined

Training (All)
Line 45

Thanks

Dan

krays23 · March 30, 2021, 11:52am

@russian-dima on a roll today lol

And yes you will also have to create a “RESET”-function.


export function clearFilterbutton_click(event, $w) {

   $w("#myDropdown1").selectedIndex = undefined;
   $w("#myDropdown2").selectedIndex = undefined;
   $w("#myDropdown3").selectedIndex = undefined;
   $w("#myDropdown4").selectedIndex = undefined;
   $w("#trainingDataset").setFilter(wixData.filter())
 

}

CODE-NINJA · March 30, 2021, 12:07pm

Well done!

export function searchButton_click(event, $w) {
   $w("#trainingDataset").setFilter(wixData.filter()
      .contains("ppl", $w("#myDropdown1").value)
      .contains("muscleGroup", $w("#myDropdown2").value)  
      .contains("exerciseType", $w("#myDropdown3").value)  
      .contains("equipmentType", $w("#myDropdown4").value))    

   .then((results) => {console.log("Data Is Now Filtered: ");
      console.log(results.items)
      $w("#listRepeater").data = results.items;
   })
   .catch((err) => {console.log(err);});
   $w("#listRepeater").expand();
}

TypeError: Cannot read property 'items'ofundefined

Results not ready at this moment?

What do you get for: console.log(results.items)
Accepted-REPEATER-DATA-FORMAT =

[
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
  }
]

Compare your CONSOLE-OUTPUT with this data-format.
Use the google-chrome-CONSOLE instead of the integrated Wix-CONSOLE.
(Press F-12 and navigate to CONSOLE).

CODE-NINJA · March 30, 2021, 12:09pm

I think this was also exactly the same point, when i decided to do everything without any DATASETs!

Topic		Replies	Views
(Multiple Unique Dropdowns) Better way to write this code? Ask the community code , question	1	91	April 19, 2021
I have code for 2 dropdown which remove duplicates and populate the options without datasets. I want to A-Z sort the first dropdown. Ask the community code , question	0	54	September 22, 2020
How would i add two extra dropdowns do this code? Ask the community code , question	1	79	July 31, 2020
Having trouble implementing conditional filtering with 3 dropdowns Ask the community code , question	0	129	April 4, 2020
Drop-down unique values Ask the community code , question	16	1263	February 18, 2021

Add multiple Unique drop downs to a code

Related topics