0

Here is a javascript ternary operator codes.

'<p>{balance>0?(Stock: {{balance}}):<span class="text-danger">Not Available</span>}</p>'

I tried many ways in order to rendered proper in HTML, however has no luck.

Output: {balance>0?(Stock: {{balance}}):<span class="text-danger">Not Available</span>} Output expected: (Stock: 23) or Not Available (in red color)

Thank you in advance!

Below is part of codes that use for working with Bloodhound plugin.

var prodName_typehead = {
                    name: 'prod_name',
                    displayKey: 'name',
                    hint: (App.isRTL() ? false : true),
                    source: item.ttAdapter(),
                    limit: 20,
                    templates: {
                       suggestion: Handlebars.compile([
                            '<div class="media">',
                                  '<div class="pull-left">',
                                      '<div class="media-object">',
                                          '<img src="{{thumb}}" width="50" height="50"/>',
                                      '</div>',
                                  '</div>',
                                  '<div class="media-body">',
                                      '<p><strong>{{name}}</strong></p>',
                                      '<p>{{desc}}</p>',
                                       '<p>{balance>0?(Stock: {{balance}}):<span class="text-danger">Not Available</span>}</p>',
                                  '</div>',
                            '</div>',
                          ].join(''))
                    }
                  };
user610983
  • 855
  • 2
  • 9
  • 14

1 Answers1

2

I believe what you want is this:

`<p>${balance>0?`Stock: ${balance}`:`<span class="text-danger">Not Available</span>`}</p>`

When I run this:

balance = 0
`<p>${balance>0?`Stock: ${balance}`:`<span class="text-danger">Not Available</span>`}</p>`

I get:

"<p><span class="text-danger">Not Available</span></p>"

And when I run this:

balance = 1
`<p>${balance>0?`Stock: ${balance}`:`<span class="text-danger">Not Available</span>`}</p>`

I get:

"<p>Stock: 1</p>"

I'm using javascript template literals to complete the variable substitution you were going for.

(Basically the issue you were having is that you needed ticks (`) instead of double quotes (") to make a template literal as NarayaN alluded to in his comment, a $ before the first bracket to start the javascript embed and then nesting this same logic for the balance inside the first string option.)

ngood97
  • 513
  • 5
  • 16
  • I tried with the method that you suggested but it does not work -> 709 Uncaught ReferenceError: balance is not defined. – user610983 Sep 03 '20 at 08:07
  • If the input of the `compile` step needs the double braces the correct solution should be: `

    ${balance>0?`Stock: {{balance}}`:`Not Available`}

    `     – ngood97 Sep 03 '20 at 12:08
  • error gone but still not working. The output show like this ${balance>0?Stock: {{balance}}:Not Available} – user610983 Sep 03 '20 at 15:38
  • @user610983 Sorry my previous comment might have been poorly formatted, can you confirm that you typed (ticks don't work here so replace the single quotes I write with ticks): '

    ${balance>0?'Stock: {{balance}}':'Not Available'}

    '     – ngood97 Sep 03 '20 at 16:04
  • Yes. I replaced the single quotes with ticks and add double braces. This time I got an error: unexpected string. – user610983 Sep 04 '20 at 01:43