Create a condition in html within javascript

Question

I have my javascript this way, that I create a pivot table:

var util = $('#utl4').val();
var linha = ``; 
$.getJSON('./atman', function (data) {

  var arrayLength = data.length;
  for (var i = 0; i < arrayLength; i++) { 
   Id = data[i][0];
   DataRegisto  = data[i][1];
   Destino = data[i][2];
   Assunto = data[i][3];
   Descricao = data[i][4];
   nome = data[i][5];
   colaborador = data[i][6];

   linha += `<tr id=${ Id }>             
   <td>${ Id }</td> 
   <td>${ DataRegisto }</td> 
   <td>${ Destino }</td> 
   <td>${ Assunto }</td>
   <td>${ Descricao }</td> 
   <td>${ nome }</td>
   <td><?php if($colaborador == $util): ?><button type="button" data-target="#ad_man" class="btn btn-warning btn-sm edit_man" ><span class="glyphicon glyphicon-pencil"></span></button><?php endif; ?></td>
   <td><?php if($colaborador == $util): ?><button class="btn btn-danger btn-sm rman"><span class="glyphicon glyphicon-trash"><?php endif; ?></td>
   </tr>`; 
}

In these two lines:

<td><?php if($colaborador == $util): ?><button type="button" data-target="#ad_man" class="btn btn-warning btn-sm edit_man" ><span class="glyphicon glyphicon-pencil"></span></button><?php endif; ?></td>
<td><?php if($colaborador == $util): ?><button class="btn btn-danger btn-sm rman"><span class="glyphicon glyphicon-trash"><?php endif; ?></td>

I intend to create the condition I have on those lines, but that way it doesn't work.

Can anyone help solve the problem?

PHP runs on the server, then JS runs on the browser. You can't "mix and match" like that. — Niet the Dark Absol
– Niet the Dark Absol, Commented Jul 15, 2020 at 16:04
Wait... those are both JS variables... So just... use JS... <td>${colaborador == util ? `<button ...>` : ''}</td> — Niet the Dark Absol
– Niet the Dark Absol, Commented Jul 15, 2020 at 16:05
@Barmar It is inside the javascript. var util = $('#utl4').val(); is the first line of javascript in the question. And colaborador = data[i][6]; is inside the for in javascript — Bruno
– Bruno, Commented Jul 15, 2020 at 16:05

Mr. Polywhirl · Accepted Answer · 2020-07-15 16:46:40Z

You can nest expressions inside template literals.

Note: You cannot execute PHP tags in the client, also your variable colaborador should not be prefixed like a PHP variable.

const data = getData();
const arrayLength = data.length;
const tbody = document.querySelector('.info-table tbody');
const util = document.querySelector('#utl4').value;

for (let i = 0; i < arrayLength; i++) {
  let id          = data[i][0];
  let dataRegisto = data[i][1];
  let destino     = data[i][2];
  let assunto     = data[i][3];
  let descricao   = data[i][4];
  let nome        = data[i][5];
  let colaborador = data[i][6];

  let linha = `
    <tr id=${ id }>             
      <td>${ id }</td> 
      <td>${ dataRegisto }</td> 
      <td>${ destino }</td> 
      <td>${ assunto }</td>
      <td>${ descricao }</td> 
      <td>${ nome }</td>
      <td>
        ${
          colaborador == util
            ? `<button
                  type="button" data-target="#ad_man"
                  class="btn btn-warning btn-sm edit_man">
                <span class="glyphicon glyphicon-pencil"></span>
              </button>` : ''
        }
        ${
          colaborador == util
            ? `<button class="btn btn-danger btn-sm rman">
                <span class="glyphicon glyphicon-trash">
              </button>` : ''
        }
      </td>
    </tr>
  `;
   
   tbody.innerHTML += linha;
}

function getData() {
  return [
    [ 1 , '2020-07-15' , 'Here'       , 'Stuff'   , '' , 'Joe'  , 'yes' ],
    [ 2 , '2020-07-15' , 'There'      , 'Things'  , '' , 'Jane' , 'no'  ],
    [ 3 , '2020-07-15' , 'Everywhere' , 'Nothing' , '' , 'Bob'  , 'yes' ]
  ];
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
  <table class="table info-table">
   <thead>
      <tr>
        <th>ID</th>
        <th>Data Registo</th>
        <th>Destino</th>
        <th>Assunto</th>
        <th>Descricao</th>
        <th>Nome</th>
        <th>Colaborador</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div class="input-group">
    <span class="input-group-addon">Colaborador</span>
    <input type="text" class="form-control" id="utl4" value="yes">
  </div>
</div>

Collectives™ on Stack Overflow

Create a condition in html within javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related