Format element based on boolean value

Ask the community
,
1

Hi

Depending on the boolean value in my dataset, I would like to format some elements, eg. If ‘approved’ is true then change the box element to white.

Essentially, what i need is…

if (approved = true) {
box element is white
} else {
box element is blue
}

Here is my code so far but I am struggling with how to implement an if/ else statement.

$w.onReady(function () {

    $w("#datasetMembersOnly").setFilter(wixData.filter()
            .eq('approved', true))
            .then(() => {
                $w("#box").style.backgroundColor = "#FFFFFF";
           
            })
});

Many thanks,
Rachel

2

Hi,
In order to get data from your database you need to use query, check it out here .
After you have the boolean write the condition, for example:

if(boolean == "true"){// boolean is the boolean you got from the database
$w("#box").style.backgroundColor = "#ffff";
}
else{
$w("#box").style.backgroundColor = "#ef0";
}
3

Hi, many thanks for your response. I am trying the following code but all results are defaulting to white (even when approved = false)

let query = wixData.query("MembersOnly");

 if (query.eq("approved", true)) {
        $w("#box").style.backgroundColor = "#FFFFFF";
    } else {
        $w("#box").style.backgroundColor = "#08306D";
    }
    query.find()
        .then((results) => {
            $w("#rptMembers").show();
        });

What am I missing?!

4

Hi,
The query is only used to get the data, you shouldn’t use it inside the condition.
try the following code and remember to change the query and the ID of the elements to match your site.

wixData.query("myCollection")
  .eq("title", "Dr.")
  .find()
  .then( (results) => {
    let boolean = results.items[0].approved;
    if(boolean == "true"){
     $w("#box").style.backgroundColor = "#ffff"; 
     } 
     else{ 
     $w("#box").style.backgroundColor = "#ef0"; 
     }
  } )
  .catch( (err) => {
    let errorMsg = err;
  } );
5

Hi, this is now bypassing the if statement and the box element is always showing as blue (even when approved = true)?

6

Use console.log to debug the code, check if the data is received they way you expected.

7

This is my code…

wixData.query("MembersOnly")
        .find()
        .then((results) => {
            $w("#rptMembers").show();
 
 let boolean = results.items[0].approved;
 if (boolean === true) {
                $w("#boxName").style.backgroundColor = "#FFFFF";
                console.log("approved");
            } else {
                $w("#boxName").style.backgroundColor = "#08306D";
                console.log("not approved");
            }
        })
        .catch((err) => {
 let errorMsg = err;
        });

but the console log is always showing “not approved” ??