Can I condense my code?

Ask the community
,
1

Hi,

I have 2 dropdowns which, when selected, return results from my datast into a repeater.

I am using an if/else statement to determine what happens when one or both dropdowns have a value and it is mostly working!

I’m just not sure whether it is necessary to repeat the count in each statement or if I can condense the code?

import wixData from 'wix-data';

$w.onReady(function ()

    {
        $w("#repeater1").data = [];
        $w("#text14").hide();
        $w("#repeater1").hide();
        $w("#box1").hide();

        $w("#button1").onClick(() => {

            $w("#repeater1").data = [];
            $w("#text14").hide();
            $w("#repeater1").hide();
            $w("#box1").hide();

 if (($w("#dropdown1").value === '--All Regions--') && ($w("#dropdown2").value === '--All Specialisms--')) {
                $w("#dataset1").setFilter(wixData.filter()

                        .eq("available", "1")
                    )

                    .then(() => {

                        console.log("Dataset is now filtered only by availability");

 let count = $w("#dataset1").getTotalCount();

 if (count > 0) {
                            $w("#box1").show();
                            $w("#repeater1").show();
                        } else {
                            $w("#box1").hide();
                            $w("#repeater1").hide();
                            $w("#text14").show();
                        }
                    })
                    .catch((err) => {
                        console.log(err);

                    });

            } else if (($w("#dropdown1").value !== '--All Regions--') && ($w("#dropdown2").value !== '--All Specialisms--')) {
                $w("#dataset1").setFilter(wixData.filter()

                        .eq("region", $w("#dropdown1").value)
                        .eq("specialism", $w("#dropdown2").value)
                        .eq("available", "1")
                    )

                    .then(() => {

                        console.log("Dataset is now filtered by region, specialism and availability");

 let count = $w("#dataset1").getTotalCount();

 if (count > 0) {
                            $w("#box1").show();
                            $w("#repeater1").show();
                        } else {
                            $w("#box1").hide();
                            $w("#repeater1").hide();
                            $w("#text14").show();
                        }
                    })
                    .catch((err) => {
                        console.log(err);

                    });

            } else if (($w("#dropdown1").value) && ($w("#dropdown2").value === '--All Specialisms--')) {
 //$w("#dropdown2").placeholder = '--All Specialisms--';
                $w("#dataset1").setFilter(wixData.filter()

                        .eq("region", $w("#dropdown1").value)
                        .eq("available", "1")
                    )

                    .then(() => {

                        console.log("Dataset is now filtered by region and availability");

 let count = $w("#dataset1").getTotalCount();

 if (count > 0) {
                            $w("#box1").show();
                            $w("#repeater1").show();
                        } else {
                            $w("#box1").hide();
                            $w("#repeater1").hide();
                            $w("#text14").show();
                        }
                    })
                    .catch((err) => {
                        console.log(err);

                    });
            } else if (($w("#dropdown1").value === '--All Regions--') && ($w("#dropdown2").value)) {
 //$w("#dropdown1").placeholder = '--All Regions--';
                $w("#dataset1").setFilter(wixData.filter()

                        .eq("specialism", $w("#dropdown2").value)
                        .eq("available", "1")
                    )

                    .then(() => {

                        console.log("Dataset is now filtered by specialism and availability");

 let count = $w("#dataset1").getTotalCount();

 if (count > 0) {
                            $w("#box1").show();
                            $w("#repeater1").show();
                        } else {
                            $w("#box1").hide();
                            $w("#repeater1").hide();
                            $w("#text14").show();
                        }
                    })
                    .catch((err) => {
                        console.log(err);

                    });
            }
        });
    });

Thanks,
Rachel

2

Hi Rachel,

In your case, it is necessary to repeat the count for each statement/condition BUT you don’t need to repeat all the count statements when you can put them all in a function then simply call that function instead of repeating all the statements, so your code should look something like this

 function countFunction(count){
 
 if (count > 0) {
 $w("#box1").show(); 
 $w("#repeater1").show();
  } 
  else { 
   $w("#box1").hide();
   $w("#repeater1").hide();     
   $w("#text14").show(); 
   } 
   
   }
  • then
 let count = $w("#dataset1").getTotalCount();
  countFunction(count);
  })
     .catch((err) => { 
     .console.log(err); });
    }

Also you can condense the code by using this:

$w("#box1,#repeater1").show();

instead of

  $w("#box1").show(); 
  $w("#repeater1").show();

another thing you can do to reduce the code is to ( NOT use hide in onReady function )
when you can hide it on load from element properties panel, then you only show it when you want.

 $w.onReady(function () {   
       $w("#repeater1").data = [];    
      $w("#text14").hide();     
     $w("#repeater1").hide();    
      $w("#box1").hide();     
     }

Hope this helps you.

Best,

Mustafa

3

Works perfectly, thank you so much!

The default placeholder text for my dropdowns are ‘select a region’ and ‘select a specialism’
How do I show ALL results from the dataset if the search button is clicked without a value being selected from the dropdown? Or Alternatively, display a message requesting that a selection is made?

I’ve tried stating something like this…

if (($w("#dropdown1").placeholder === 'select a region') && ($w("#dropdown2").placeholder === 'select a region')) {
//display all results
}

but I realised that the placeholder is a constant value so all results will always be returned.

my current code now looks like this…

import wixData from 'wix-data';

function countFunction(count) {

 if (count > 0) {
        $w("#box1,#repeater1").show();
    } else {
        $w("#box1,#repeater1").hide();
    }
}

$w.onReady(function () {
    $w("#button1").onClick(() => {

        $w("#repeater1").data = [];
        $w("#text14").hide();
        $w("#repeater1").hide();
        $w("#box1").hide();

 if (($w("#dropdown1").value === '--All Regions--') && ($w("#dropdown2").value === '--All Specialisms--')) {
            $w("#dataset1").setFilter(wixData.filter()

                    .eq("available", "1"))

                .then(() => {

                    console.log("Dataset is now filtered only by availability");

 let count = $w("#dataset1").getTotalCount();
                    countFunction(count);
                })
                .catch((err) => {
                    console.log(err);
                });

        } else if (($w("#dropdown1").value !== '--All Regions--') && ($w("#dropdown2").value !== '--All Specialisms--')) {
            $w("#dataset1").setFilter(wixData.filter()

                    .eq("region", $w("#dropdown1").value)
                    .eq("specialism", $w("#dropdown2").value)
                    .eq("available", "1"))

                .then(() => {

                    console.log("Dataset is now filtered by region, specialism and availability");

 let count = $w("#dataset1").getTotalCount();
                    countFunction(count);
                })
                .catch((err) => {
                    console.log(err);
                });

        } else if (($w("#dropdown1").value) && ($w("#dropdown2").value === '--All Specialisms--')) {
            $w("#dataset1").setFilter(wixData.filter()

                    .eq("region", $w("#dropdown1").value)
                    .eq("available", "1"))

                .then(() => {

                    console.log("Dataset is now filtered by region and availability");

 let count = $w("#dataset1").getTotalCount();
                    countFunction(count);
                })
                .catch((err) => {
                    console.log(err);
                });

        } else if (($w("#dropdown1").value === '--All Regions--') && ($w("#dropdown2").value)) {
            $w("#dataset1").setFilter(wixData.filter()

                    .eq("specialism", $w("#dropdown2").value)
                    .eq("available", "1"))

                .then(() => {

                    console.log("Dataset is now filtered by specialism and availability");

 let count = $w("#dataset1").getTotalCount();
                    countFunction(count);
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    });
});

Thank you!

Rachel

4

To check if the user selected an option from the dropdown, you can do the following :

if($w("#dropdown").value){ // checks if the dropdown has value
    console.log("something selected"); // if there is value
  }
 else {
    console.log("nothing selected");// if Not
  }

Hope that’s what you want.
Best,

Mustafa

5

Hi Mustafa, thank you for your reply. It’m not sure it’s quite what I’m after. I already have a number of conditions set out to determine which results should be displayed based on user selection but because I have two dropdowns I’d like them to work independently as well as together. Maybe I just need to add more options to my if/else statement? How do I specify if no value has been selected? Can I use ‘null’?

Thanks,
Rachel

6

The previous example i mentioned checks if the user selected a value or not:

 if($w("#dropdown").value){ // checks if the dropdown has value Or not
  console.log("something selected"); // if there is value 
  } else {  
    console.log("nothing selected");// if Not 
    }

so, if ($w(“#dropdown”).value) wiill check if the dropdown has value.

And yes, you have to have different if statement for each condition, and you can at the end take an over look at the code to see if some code could be condense.

hope this helps you.

7

But how do I determine if one or both dropdowns have a value?

I have tried…

if(($w("#dropdown1").value = null) && ($w("#dropdown2").value = null))

but this is giving an error?

Thank you for your help.

8

You can’t equalize dropdown value to null, So that you can use this if statement :

if ( !$w("#dropdown1").value && !$w("#dropdown2").value )

or this, if you want same structure as your statement :

if($w("#dropdown1").value === "" && $w("#dropdown2").value === "" )

*Note : dropdown cannot be null, but Empty.

9

Ah, thank you!

Ultimately, what I am trying to achieve is something like this…

if (dropdown1 is empty and dropdown2 is empty) {
//no results
}
if (dropdown1 is empty and dropdown2 has value) {
//filter results by dropdown2 only
}
if (dropdown1 has value and dropdown2 is empty) {
//filter results by dropdown1 only
}
if (dropdown1 has value and dropdown2 has value) {
//filter results by dropdown1 and dropdown2
}

so I just need to put each one in a separate if/else statement?

10

Yes, exactly!

 if ($w("#dropdown1").value === "" && $w("#dropdown2").value === "" ){}
  if($w("#dropdown1").value === "" && $w("#dropdown2").value ){}
   if($w("#dropdown1").value  && $w("#dropdown2").value === "" ){}
    if($w("#dropdown1").value && $w("#dropdown2").value ){}
11

Perfect! Thank you :slight_smile: