If else statement inside return " " statement

Question

Is this possible? I'm trying to hide the Approve Button if the column approvedby is not empty. This is from a Server-Side dataTable. My problem is I can't find a way for if else to be used because I'm using return "".

This is the script.

$(function() {
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "earnings_amendment_account_table.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "accountcode" },
            { data: "accounttitle" },
            { data: "accounttype" },
            { data: "approvedby" },
            { "data": "accountcode", "name": " ", "autoWidth": true, "render": function (data, type, full, meta) {
return "<button class='btn btn-success btn-sm btn-flat edit' data-id='"+full.accountcode+"'><i class='fa fa-edit'></i> Edit</button> <button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.accountcode+"'><i class='fa fa-trash'></i> Delete</button> if (empty("+full.approvedby+")) { <button class='btn btn-warning btn-sm approve btn-flat' data-id='"+full.accountcode+"'><i class='fa fa-check-square-o'></i> Approve</button>}";}
                        }
        ],
        select: false,
        buttons: []
    } );
} );

This is the result. I can't seem to find a way for if else to work inside return "".

Exactly what sort of thing will `full.approvedby` be if it's empty? Will it be an empty string, or an array with no items, or something like that? — CertainPerformance, Aug 09 '19 at 03:29
@CertainPerformance, even if it's marked as 'null' will do, Approve Button will only show when the row in which ````full.approvedby```` is null in database. — pjustindaryll, Aug 09 '19 at 03:30

score 1 · Answer 1 · answered Aug 09 '19 at 03:35

I'd use the conditional operator to check the approvedby property - if not null, use a string that includes the button, else use the empty string. You may also use template literals to greatly improve readability:

$('#example').DataTable({
  dom: "Bfrtip",
  ajax: {
    url: "earnings_amendment_account_table.php",
    type: "POST"
  },
  serverSide: true,
  columns: [{
      data: "accountcode"
    },
    {
      data: "accounttitle"
    },
    {
      data: "accounttype"
    },
    {
      data: "approvedby"
    },
    {
      "data": "accountcode",
      "name": " ",
      "autoWidth": true,
      "render": function(data, type, { accountcode, approvedby }, meta) {
        return `
          <button class='btn btn-success btn-sm btn-flat edit' data-id='${accountcode}'>
            <i class='fa fa-edit'></i>
            Edit
          </button>
          <button class='btn btn-danger btn-sm btn-flat delete' data-id='${accountcode}'>
            <i class='fa fa-trash'></i>
            Delete
          </button>
          ${approvedby !== null
            ? `<button class='btn btn-warning btn-sm approve btn-flat' data-id='${accountcode}'>
                 <i class='fa fa-check-square-o'></i>
                 Approve
               </button>}`
            : ''
          }
         `;
      }
    }
  ],
  select: false,
  buttons: []
});

Another option would be to use an if statement to concatenate with the string to be returned after defining the original HTML:

$('#example').DataTable({
  dom: "Bfrtip",
  ajax: {
    url: "earnings_amendment_account_table.php",
    type: "POST"
  },
  serverSide: true,
  columns: [{
      data: "accountcode"
    },
    {
      data: "accounttitle"
    },
    {
      data: "accounttype"
    },
    {
      data: "approvedby"
    },
    {
      "data": "accountcode",
      "name": " ",
      "autoWidth": true,
      "render": function(data, type, { accountcode, approvedby }, meta) {
        let str = `
          <button class='btn btn-success btn-sm btn-flat edit' data-id='${accountcode}'>
            <i class='fa fa-edit'></i>
            Edit
          </button>
          <button class='btn btn-danger btn-sm btn-flat delete' data-id='${accountcode}'>
            <i class='fa fa-trash'></i>
            Delete
          </button>
        `;
        if (approvedby !== null) {
          str += `
            <button class='btn btn-warning btn-sm approve btn-flat' data-id='${accountcode}'>
              <i class='fa fa-check-square-o'></i>
              Approve
            </button>}`;
        }
        return str;
      }
    }
  ],
  select: false,
  buttons: []
});

I did triple-check the syntax and plugged it into a syntax checker, I'm sure the syntax is valid - what exactly is the issue? — CertainPerformance, Aug 09 '19 at 03:42
I'm checking it on my end. I think I have a problem with the other codes inside script. — pjustindaryll, Aug 09 '19 at 03:48

score 1 · Answer 2 · answered Aug 09 '19 at 03:36

Well, you are passing your if statement within a string, which would tell your browser to

Read this string as JavaScript
Read it as a string

Which the browser will not interpret as code.

Rather try something like this:

$(function() {
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "earnings_amendment_account_table.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "accountcode" },
            { data: "accounttitle" },
            { data: "accounttype" },
            { data: "approvedby" },
            { "data": "accountcode", "name": " ", "autoWidth": true, "render": function (data, type, full, meta) {
              return `<button class='btn btn-success btn-sm btn-flat edit' data-id='${full.accountcode}'>
                <i class='fa fa-edit'></i> Edit
              </button>
              <button class='btn btn-danger btn-sm btn-flat delete' data-id='${full.accountcode}'>
                <i class='fa fa-trash'></i> Delete
              </button>
              ${(full.approvedby == '') ? `<button class='btn btn-warning btn-sm approve btn-flat' data-id='${full.accountcode}'><i class='fa fa-check-square-o'></i> Approve</button>` : ''}`;
          }
        ],
        select: false,
        buttons: []
    } );
} );

This will stop JavaScript from reading a string and actually query whether there's value in approvedby.

This didn't work on me. I'm trying to figure out which one is the problem, I think it's my quotation. — pjustindaryll, Aug 09 '19 at 03:41

score 1 · Accepted Answer · answered Aug 09 '19 at 03:39

Try this

$(function() {
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "earnings_amendment_account_table.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "accountcode" },
            { data: "accounttitle" },
            { data: "accounttype" },
            { data: "approvedby" },
            { 
                data: "accountcode",
                name: " ",
                autoWidth: true,
                render: function (data, type, full, meta) {
                    let html = "<button class='btn btn-success btn-sm btn-flat edit' data-id='"+full.accountcode+"'><i class='fa fa-edit'></i> Edit</button> ";
                    html += "<button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.accountcode+"'><i class='fa fa-trash'></i> Delete</button> ";
                    html += "<button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.accountcode+"'><i class='fa fa-trash'></i> Delete</button> ";

                    if (!full.approvedby)
                        html += "<button class='btn btn-warning btn-sm approve btn-flat' data-id='"+full.accountcode+"'><i class='fa fa-check-square-o'></i> Approve</button>";

                   return html;
                }
            }
        ],
        select: false,
        buttons: []
    } );
} );

Note I removed the empty() function you used in the if statement.

The reason why it didnt work is because you wrote the if statement as a string so it didnt process as a javascript code.

Here's an example on how to write inline if statements in javascript.

return 'Hello my name is ' + (name === 'Miroslav' ? name : 'Anonymous') + ' and I just wrote an inline if statement';

This worked, but I don't understand how ````html += ""```` works. I'll study this, as this will be my base line of structure throughout my project. Thank you! — pjustindaryll, Aug 09 '19 at 03:43
@pjustindaryll so what this `html += ""` does is appends a string to `html` variable which already contains a string. Here's a [link](https://stackoverflow.com/questions/1288095/append-to-string-variable) you could read to get a better understanding. — Miroslav, Aug 09 '19 at 03:54
Oh I see, it's similar to a variable holder. I understand it now. Thank you! — pjustindaryll, Aug 09 '19 at 03:57

If else statement inside return " " statement

3 Answers3