Javascript: if else statement

Question

I'm trying to get an if else statement to work in Javascript. This was the original code (without if statement) and it's working:

         html += "<td><a href='"+item['UrlBuyer']+"' target='blank'>"+item['ID']+"</a></td>"+
                 "<td>"+item['ImportDatum']+"</td>"+
                 "<td>"+item['ReceiptLimitDate']+"</td>"+

My idea was to add an if/else statement on the first line. If the field UrlBuyer is null, then don't make a href link.

Something like below, but it's not working.

         html += if(item['UrlBuyer'] == null){
                      "<td><a href='"+item['UrlBuyer']+"' target='blank'>"+item['ID']+"</a></td>"+
                 } else {"<td>"+item['ID']+"</td>"+
                    }
                "<td>"+item['ImportDatum']+"</td>"+
                "<td>"+item['ReceiptLimitDate']+"</td>"+

`if` is a control block, not an expression. – Daniel A. White Mar 11 '19 at 16:12 — Daniel A. White, Mar 11 '19 at 16:12
Try a ternary instead of an if/else. – aynber Mar 11 '19 at 16:12 — aynber, Mar 11 '19 at 16:12

score 1 · Answer 1 · answered Mar 11 '19 at 16:12

Incorrect syntax. Try this :

if(item['UrlBuyer'] == null){
    html += "<td><a href='"+item['UrlBuyer']+"' target='blank'>"+item['ID']+"</a></td>" +  "<td>"+item['ImportDatum']+"</td>"+
    "<td>"+item['ReceiptLimitDate']+"</td>"
} else {
    html += "<td>"+item['ID']+"</td>"+"<td>"+item['ImportDatum']+"</td>"+
    "<td>"+item['ReceiptLimitDate']+"</td>"
}

score 1 · Answer 2 · answered Mar 11 '19 at 16:14

Try Ternary:

 html += item['UrlBuyer'] == null ? 
                      "<td><a href='"+item['UrlBuyer']+"' target='blank'>"+item['ID']+"</a></td>"+
                     : "<td>"+item['ID']+"</td>"+
                    "<td>"+item['ImportDatum']+"</td>"+
                    "<td>"+item['ReceiptLimitDate']+"</td>"+

score 1 · Answer 3 · answered Mar 11 '19 at 16:16

You can use conditional operator :

html += (item['UrlBuyer'] == null) ? "<td><a href='"+item['UrlBuyer']+"' target='blank'>"+item['ID']+"</a></td>" + "<td>"+item['ImportDatum']+"</td>"+ "<td>"+item['ReceiptLimitDate']+"</td>" : "<td>"+item['ID']+"</td>"+"<td>"+item['ImportDatum']+"</td>"+ "<td>"+item['ReceiptLimitDate']+"</td>";

Also read this answers about the conditional operators and how to use it

score 1 · Answer 4 · answered Mar 11 '19 at 16:16

You can also try return inside your if else block

html += if(item['UrlBuyer'] == null){
                    return "<td><a href='"+item['UrlBuyer']+"' target='blank'>"+item['ID']+"</a></td>"+
                 } else { return "<td>"+item['ID']+"</td>"+
                    }
                "<td>"+item['ImportDatum']+"</td>"+
                "<td>"+item['ReceiptLimitDate']+"</td>"+

score 1 · Accepted Answer · answered Mar 11 '19 at 16:33

If this is HTML inside PHP code, then the array (for example: item['UrlBuyer']) you are trying to check is a PHP array, you are not checking it in JavaScript. Javascript inside PHP should be in tags within the string "" like other html. Since the item['UrlBuyer'] is a PHP array item you are trying to check, You can re-write the code in the following manner;

    <?php 
    if(item['UrlBuyer'] == null){
      html += "<td><a href='"+item['UrlBuyer']+"' target='blank'>"+item['ID']+"</a></td>";
    } else {
      html += "<td>"+item['ID']+"</td>";
    }
    html += "<td>"+item['ImportDatum']+"</td>"+"<td>"+item['ReceiptLimitDate']+"</td>";
    ?>

score 0 · Answer 6 · answered Mar 11 '19 at 16:20

Or better and less complex thing is to define a variable and add content to it conditionally:

var html =  "";
if(item['UrlBuyer'] == null){
             html += "<td><a href='"+item['UrlBuyer']+"' target='blank'>"+item['ID']+"</a></td>";
    } else {
            html += "<td>"+item['ID']+"</td>";
    }
 html += "<td>"+item['ImportDatum']+"</td><td>"+item['ReceiptLimitDate']+""</td>";

likewise...

score 0 · Answer 7 · answered Mar 11 '19 at 16:27

For one thing, the syntax for writing an inline if/else statement is like this (called a ternary conditional):

(condition) ? <code if true> : <code if false>

But on top of that, you should really split that code up into multiple steps, to make it more readable. Something like this would make more sense/be more maintainable in the long run:

if(item['UrlBuyer'] === null) {
  html += "<td>"+item['ID']+"</td>"
} else {
  html += "<td><a href='"+item['UrlBuyer']+"' target='blank'>"+item['ID']+"</a></td>";
}

html += "<td>"+item['ImportDatum']+"</td>";
html += "<td>"+item['ReceiptLimitDate']+"</td>";

Javascript: if else statement

7 Answers7