0

Good day,

I was confused on how am I be able to add an If statement inside my loop when appending strings.

heres my code

html += '<tr><td></td>'+
            '<td>'+moment(x.date_at).format('MM/DD/YYYY') +'</td>'+
            '<td>'+x.transactionType+'</td>'+
            '<td>'+x.id+'</td>'+
            '<td>'+if(x.description!=null){x.description}+'</td>'+
            '<td>'+x.ref_no+'</td>'+
            '<td class="align-right">'+x.debit+'</td>'+
            '<td class="align-right">'+x.credit+'</td>'+
            '<td class="align-right">'+val+'</td></tr>';
    });

I am then getting a syntax error error on the IF part. Thanks for the help. its been a while since I code thats why im a bit confused.

melvnberd
  • 3,093
  • 6
  • 32
  • 69

4 Answers4

2

You can't just place an if statement anywhere in your code. If you need to get this functionality in that place you need to use a ternary if operator ?:

html += '<tr><td></td>'+
            '<td>'+moment(x.date_at).format('MM/DD/YYYY') +'</td>'+
            '<td>'+x.transactionType+'</td>'+
            '<td>'+x.id+'</td>'+
            '<td>'+ (x.description!=null ? x.description : '')+'</td>'+
            '<td>'+x.ref_no+'</td>'+
            '<td class="align-right">'+x.debit+'</td>'+
            '<td class="align-right">'+x.credit+'</td>'+
            '<td class="align-right">'+val+'</td></tr>';

If you want to use if anyway, you should introduce a variable that will hold the resulting value: 

var temp = '';
if (x.description != null)
temp = x.description;
html += '<tr><td></td>'+
            '<td>'+moment(x.date_at).format('MM/DD/YYYY') +'</td>'+
            '<td>'+x.transactionType+'</td>'+
            '<td>'+x.id+'</td>'+
            '<td>'+ temp +'</td>'+
            '<td>'+x.ref_no+'</td>'+
            '<td class="align-right">'+x.debit+'</td>'+
            '<td class="align-right">'+x.credit+'</td>'+
            '<td class="align-right">'+val+'</td></tr>';
Vsevolod Goloviznin
  • 12,074
  • 1
  • 49
  • 50
  • Thank you very much for that quick answer @Vsevolod! Im really confused why I am getting that error coz I thought Its really correct syntax.. anyways thank you very much for clearing this one out for me. – melvnberd Dec 07 '14 at 19:47
1

You can use a shorthand if/else like this:

html += '<td>'+(x.description!=null ? x.description : '' )+'</td>';

Inside your code:

html += '<tr><td></td>'+
            '<td>'+moment(x.date_at).format('MM/DD/YYYY') +'</td>'+
            '<td>'+x.transactionType+'</td>'+
            '<td>'+x.id+'</td>'+
            '<td>'+(x.description!=null ? x.description : '' )+'</td>'+
            '<td>'+x.ref_no+'</td>'+
            '<td class="align-right">'+x.debit+'</td>'+
            '<td class="align-right">'+x.credit+'</td>'+
            '<td class="align-right">'+val+'</td></tr>';
Community
  • 1
  • 1
chrki
  • 6,143
  • 6
  • 35
  • 55
1

I think that you only need to break your concatenation like this:

html += '<tr><td></td>'+
            '<td>'+moment(x.date_at).format('MM/DD/YYYY') +'</td>'+
            '<td>'+x.transactionType+'</td>'+
            '<td>'+x.id+'</td>';

if(x.description!=null) html+=  '<td>' + {x.description} + '</td>';

html +=     '<td>'+x.ref_no+'</td>'+
            '<td class="align-right">'+x.debit+'</td>'+
            '<td class="align-right">'+x.credit+'</td>'+
            '<td class="align-right">'+val+'</td></tr>';
    });
kiks73
  • 3,718
  • 3
  • 25
  • 52
0

You can't use if like that. The fundamental problem is that in JavaScript if is a statement, not an expression, and it doesn't return any value (unlike more strict functional languages like Scala, where everything is an expression and produces a value).

So you have the following options:

  1. Use ternary conditional operator ?: which produces a value and actually can be used in an expression:

    ... + x.description? x.description : '' + ...

The only inconvenience is that you always need an else value, so in case of just checking description for null, you need to provide an empty string as an alternative. It could be a hassle when you need a lot of fields to print.

  1. Use a helper function within the formatting scope. This is an elegant solution in case you have just a single big object to format:

const source = {
  first: 'first',
  second: null,
  third: 'third',
}

function fmt(key) {
  return source[key]? source[key] : ''
}

let html = '<div><hr>'
  + fmt('first') + '<hr>'
  + fmt('second') + '<hr>'
  + fmt('third') + '<hr>'
  + '</div>'
 
document.write(html)
  1. As a more compact alternative to ?: operator, you can use || operator like this:

   const s = {
      first: 'first',
      second: null,
      third: 'third',
    }

    let html = '<div><hr>'
      + (s.first || '') + '<hr>'
      + (s.second || '') + '<hr>'
      + (s.third || '') + '<hr>'
      + '</div>'
     
    document.write(html)

I guess this one is more elegant than #1, since you don't have to repeat property access 2 times :)

Igor Khotin
  • 36
  • 4