Adding If / Else If Statment Inside Javascript HTML

Question

Ok so I have a Server side datatable reading JSON format with child rows. How can I have If / Else If / Switch statements in between?

<script type="text/javascript">

function format ( d ) {
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">',

  '<tbody>'+
    '<tr>'+
        '<td class="second-td-box">'+
           '<p class="at-a-glance">Basic information:</p>'+
           '<p><span class="subhead">Name: </span>'+d.RES_GUEST_FIRSTNAME+'</p>'+
        '</td>'+
    '</tr>'+ 
  '</tbody>'+
'</table>'+
</script>

I have tried:

    <script type="text/javascript">

function format ( d ) {
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">',

  '<tbody>'+
    '<tr>'+
        '<td class="second-td-box">'+ ''
            if (d.RES_GUEST_FIRSTNAME == "Alex") {
           '<p class="at-a-glance">Basic information:</p>'+
           '<p><span class="subhead">Name: </span>'+d.RES_GUEST_FIRSTNAME+'</p>'+
            }
        '</td>'+
    '</tr>'+ 
  '</tbody>'+
 '</table>'+
 </script>

Solved the problem using the following code:

 ((d.BOOKING_SOURCE_ID == 73844)?
        '<td class="second-td-box">'+
           '<p class="at-a-glance">Airbnb information:</p>'+
           '<p><span class="subhead">Confirmation: </span>'+d.CONFIRMATION+'</p>'+
           '<p><span class="subhead">Agency Income: </span>'+d.AIRBNB_AGENCY_INCOME+'</p>'+
           '<p><span class="subhead">Airbnb Income: </span>'+d.AIRBNB_INCOME+'</p>'+
           '<p><span class="subhead">Airbnb fees: </span>'+d.AIRBNB_FEES+'</p>'+
           '<p><span class="subhead">Airbnb per night: </span>'+d.AIRBNB_PER_NIGHT+'</p>'+ 
           '<span id="chart_div"></span>'
          :"")+
        '</td>'+


     ((d.BOOKING_SOURCE_ID == 73858)?
           '<td class="second-td-box">'+
           '<p class="at-a-glance">Booking.com information:</p>'+
           '<p><span class="subhead">Booking date: </span>'+d.BOOKING_DATE+'</p>'+
           '<p><span class="subhead">Booking currency: </span>'+d.BOOKING_CURRENCY+'</p>'+
           '<p><span class="subhead">Booking total: </span>'+d.BOOKING_TOTAL+'</p>'+
           '<p><span class="subhead">Booking comission: </span>'+d.BOOKING_COMISSION+'</p>'+
           '<p><span class="subhead">Booking policy: </span>'+d.BOOKING_POLICY+'</p>'+ 
           '<span id="chart_div"></span>'
            :"")+
        '</td>'+
        '</tr>'+

Seems that I can only "Print" using the Conditional operator.

Gunni · Accepted Answer · 2015-06-24 10:55:39Z

1

You can try the conditional operator ( https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Conditional_Operator ):

<script type="text/javascript">

function format ( d ) {
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">',

  '<tbody>'+
    '<tr>'+
        '<td class="second-td-box">'+ '' +
           ((d.RES_GUEST_FIRSTNAME == "Alex")?
           '<p class="at-a-glance">Basic information:</p>'+
           '<p><span class="subhead">Name:</span>'+d.RES_GUEST_FIRSTNAME+'</p>'
            :"")+
        '</td>'+
    '</tr>'+ 
  '</tbody>'+
 '</table>'+
 </script>

answered Jun 24, 2015 at 10:55

Gunni

5195 silver badges14 bronze badges

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

2 Comments

Ilanus Over a year ago

Solved with your help. Thanks!

Gunni Over a year ago

If you want to do if/then/else, you can nest the conditional operator like this: (a=='1'?'text for 1':(a=='2'?'Text for 2':''))

Sachin · Accepted Answer · 2022-01-08 09:38:00Z

1

If you are using `` this could be helpful for you.

`<div class="user-email">
   ${response[i].email ? '<i class="fas fa-envelope"></i>': ""}
   ${response[i].email}
</div>
<div class="user-phone">
    ${response[i].phone ? '<i class="fas fa-phone-alt"></i>': ""}
     ${response[i].phone}
</div>`

answered Jan 8, 2022 at 9:38

Sachin

112 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2015-06-24 10:56:29Z

0

You cannot use if statements while concatenating with. You may use conditional operator something like this:

'string' + d.RES_GUEST_FIRSTNAME ? 'add string' : '' + 'another string';

answered Jun 24, 2015 at 10:56

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

DRC · Accepted Answer · 2015-06-24 10:57:01Z

0

return 'string ='+(d.RES_GUEST_FIRSTNAME == "Alex")?'yes':'no';

Usage:

(condition)? [value if true] : [value if false];

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

answered Jun 24, 2015 at 10:57

DRC

714 bronze badges

Comments

Peter Campbell · Accepted Answer · 2015-06-24 11:01:35Z

0

Essentially you are returning a string, so you can build this up bit by bit. I would highlight that returning HTML as string from JavaScript is not a recommended way to inject HTML.

var returnString = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';

returnString += '<tbody>';
returnString += '<tr>';

and so on..

Then return the string

 return returnString;

So if you want to add in a if/ if else

then you can do something like

if (d.RES_GUEST_FIRSTNAME == "Alex") {
   returnString += '<p class="at-a-glance">Basic information:</p>';
}

answered Jun 24, 2015 at 11:01

Peter Campbell

6711 gold badge7 silver badges35 bronze badges

Collectives™ on Stack Overflow

Adding If / Else If Statment Inside Javascript HTML

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related