Problem Bringing Database Data to html

Question

hello people I am doing a school project and would like a help in this part, here should happen the following, when the customer select the attendant in select Service should be listed the services related to the attendant and soon after it seems the value of the same.

until now I was able to make it look like the attendants but I can’t make it look like the services related to them and the value of them.

am using express, Node.js, mysql

select html code:

<form method="post" action="">
<div class="container" id="informacoesagendamento">
    <div class="container" id="all">
        <table>
            <tr>
                <td>
                    Atendente 
                    <select class="simple" id="atendente">
                        <option>Selecione a Atendente</option>
                        <% dadosAdm.forEach(function(row){%>
                        <option value="<%= row.cod_adm%>"><%= row.nome_adm%></option>
                        <% });%>
                    </select>
                </td>
                <td>
                    <div id="serv">Serviço</div>
                    <select class="simple" id="servico">
                        <option>Selecione o Serviço</option>
                        <% var e = document.getElementById('atendente').value;
                            var itemSelecionado = parseInt(e.options[e.selectedIndex].value);
                            %>
                        <% dadosAdm.forEach(function(row){
                            if(row.cod_adm === itemSelecionado){
                            %>
                        <option value="<%= row.cod_adm%>"><%= row.nome_adm%></option>
                        <%} });%>
                    </select>
                </td>
            </tr>
        </table>
        <br/>
        <table>
            <tr>
                <td>
                    Data <input type="date" id="data">
                </td>
                <td>
                    <div id="HD">Horários Disponíveis</div>
                    <select class="simple" id="horariosD">
                        <option>Selecione o Horário</option>
                        <option></option>
                        <option></option>
                        <option></option>
                    </select>
                </td>
            </tr>
        </table>
        <br/>
        <table>
            <tr>
                <td>
                    Valor Total <input type="text" id="valor" disabled="">
                </td>
            </tr>
    </div>
    </table>
    <br/>
    <br/>
    <table>
        <tr>
            <td>
                <button type="button" class="btn btn-outline-success" id="btnConfirmar"><b>Confirmar</b></button>
            </td>
            <td>
                <button type="button" class="btn btn-outline-warning" id="btnEditar"><b>Editar</b></button>
            </td>
            <td>
                <button type="button" class="btn btn-outline-danger" id="btnCancelar"><b>Cancelar</b></button>
            </td>
            <td>
                <button type="button" class="btn btn-outline-secondary" id="btnNovoAgend"><b>Novo Agendamento</b></button>
            </td>
        </tr>
    </table>
</div>
</form>

and that’s the code js(express(ejs):

router.get('/agendamento', function(req, res, next) {
  if(!req.session.user){
    res.redirect("loginCli");
  } else {
    var dadosAdm;
    conn.query('SELECT cod_adm, nome_adm FROM bdlabella.tbadministrador', (err, results) => {

      if(err){
        console.log(err);
      };

      agendamento.procurar().then(resultado =>{

      res.render('TelaAgendamento', { 
        title: 'Tela Agendamento - La Belle',
        dadosAdm: results,
        dadosSer: resultado
      }); 

    }).catch(err => {
      loginClin.render(req, res, err.message || err);
    });

   });
  }
});

this is the error that is giving in the browser screen:

Answer 1

The problem is that you are trying to use a browser API on the server side. What you are trying to do in the row below is wrong.

var e = document.getElementById('atendente').value;

That’s why you’re trying to use a browser API (document) on the server side (inside the view). When using Node.js, we need to know that although we are using the same language (Javascript), Apis are not always shared.

So your error message says that documet is undefined why it does not exist on the Node.js environment. It belongs to the browser only.