Double false for Inline If-Else with Conditional Operator

Question

I am trying to hide an input field if the td doesn't have a value.

I know we can have a condtition like this:

${condition ? true : false}

but how can I have an inline operator like this?

${condition ? true : false && false}

Example:

${JsonObject ? JsonObject.Description : " " && $('#textbox').removeattr("style").hide()}

The html is similar to this:

`<td>
${JsonObject ? JsonObject.Description : " " && $('#textbox').removeattr("style").hide()}
</td>
`<div><input id="textbox"></div>

" " && $('#textbox').removeattr("style").hide() What is the reason for having a empty space? I mean, it doesnt assign or anything? — Krishna Prashatt
– Krishna Prashatt, Commented Aug 8, 2019 at 9:56
It sounds like this would be much easier to understand with a simple if/else statement. — James Long
– James Long, Commented Aug 8, 2019 at 9:58
@KrishnaPrashatt so i have a table which sometimes brings back 2 values, and sometimes one per object. So it shows a space instead of an "undefined" when value 2 doesnt exist. hopefully that makes sense. value 1 is always true but not always value 2. and if value 2 doesnt exist, I need it to hide the textbox. — Tumi
– Tumi, Commented Aug 8, 2019 at 9:59
@JamesLong its in between like 20 <td></td> hence i wonder if its possible to add 2 actions to the else statement in an inline if/else statement. — Tumi
– Tumi, Commented Aug 8, 2019 at 10:01

T.J. Crowder · Accepted Answer · 2019-08-08 10:18:10Z

4

If I'm understanding you right, you want the truthy result to be the description, and the falsy result to be " " and to have the side-effect of removing the style attribute from #textbox and hiding it.

I strongly recommend not doing that. Side-effects like that are extremely hard to debug and maintain.

But if you really want to, make the side-effect first:

`<td>
${JsonObject ? JsonObject.Description : $('#textbox').removeattr("style").hide() && " "}
</td>
`<div><input id="textbox"></div>

That works because hide returns the jQuery object, which is truthy, so the (object) && " " expression results in " ". Or as James Long points out, you could use the comma operator instead, and then the return value of hide wouldn't matter: ${JsonObject ? JsonObject.Description : ($('#textbox').removeattr("style").hide(), " ")} (you don't actually need those (), but it's already confusing enough, and it's even more confusing without them, so...).

But again, I wouldn't. Instead, I'd just do:

`<td>
${JsonObject ? JsonObject.Description : " "}
</td>
`<div><input id="textbox"></div>

...and then just before or just after this template literal, have

if (!JsonObject) {
    $('#textbox').removeattr("style").hide();
}

edited Aug 8, 2019 at 10:18

answered Aug 8, 2019 at 10:01

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

James Long Over a year ago

An alternative would be ${JsonObject ? JsonObject.Description : ($('#textbox').removeAttr("style").hide(), "")} (harder to read and understand IMO) but +1 for recommending a simple if

ylerjen Over a year ago

A nice Stackoverflow feature would be to see what other are currently answering. This would help me to not write 20 lines and then see that someone already answer the same but quicker :D. But anyway your explanation was better than mine so thank you for this :)

T.J. Crowder Over a year ago

@JamesLong - Good point, yes, that way the return value wouldn't matter. (If you want to make it more confusing, you don't even needs those (). ;-) )

James Long Over a year ago

@T.J.Crowder the second law of thermo-dynamic-HTML: confusion always increases

Collectives™ on Stack Overflow

Double false for Inline If-Else with Conditional Operator

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related