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.

Answer 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>

Answer 2

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>`