user id not received in controller - Node-js

Question

I'm studying Node and I'm having some problems. My objective is to create a table that lists the users registered in the database, the table is created all right, but in the editing part the user ID is not being passed correctly. then the edit page is loaded but the user data to be edited is not loaded.

I'm using:

"dependencies": {
    "express": "^4.18.2",
    "express-handlebars": "^7.1.2",
    "mysql2": "^3.6.1",
    "nodemon": "^3.0.1",
    "sequelize": "^6.33.0"
  }

the table is loaded via Partials:

<table class="table table-striped table-sm">
  <thead>
    <tr>
      <th>Id</th>
      <th>Usuário</th>
      <th>Idade</th>
      <th class="text-right p-2">Ações</th>
    </tr>
  </thead>
  <tbody>
    {{#each users}}
    <tr>
      <td>{{this.id}}</td>
      <td>{{this.name}}</td>
      <td>{{this.age}}</td>
      <td class="text-right p-2">
        <a href="/editUser/{{this.id}}" class="btn btn-primary btn-sm">Editar</a>
        <a href="/deleteUser/{{this.id}}" class="btn btn-danger btn-sm">Excluir</a>
      </td>
    {{/each}}
  </tbody>
</table>

The route

router.get('/editUser/:id', UserController.editUser);

The controller:

static async editUser(req, res) {
    const id = req.body.id;
    console.log("ID: ",id);
    const user = await User.findOne({where:  {id: id }, raw: true});
    res.render('editUser', { user });
  }

Edit Page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
{{> navbar}}
<div class="container d-flex align-items-center justify-content-center flex-column ">
  <h1>Editar o usuário {{user.name}}</h1>
  <form action="/editUser/{{user.id}}" method="post" class="d-flex align-items-center justify-content-center flex-column p-2 m-2 ">
  <input type="hidden" name="id" value="{{user.id}}">
    <div class="form-group d-flex flex-column ">
      <label for="name" class="">Nome</label>
      <input type="text" name="name" id="name" class="form-control" value="{{user.name}}" required>
    </div>
    <div class="form-group d-flex flex-column">
      <label for="age">Idade</label>
      <input type="number" name="age" id="age" class="form-control" value="{{user.age}}">
    </div>
    <input type="submit" value="Editar" class="btn btn-primary btn-success m-2">
    <input href="/allUsers" type="button" value="Cancelar" class="btn btn-primary btn-danger m-2">
  </form>
</div>

complete project at: https://github.com/alanmarinho/node_addEdit_User

Can someone help me?

I expected user data to be displayed on the edit users screen

Answer 1

As user @76484 has pointed out, this answer explains why your data might not be displayed. Despite that being about Mongoose it is still relevant to Sequelize because:

By default, the results of all finder methods are instances of the model class (as opposed to being just plain JavaScript objects). This means that after the database returns the results, Sequelize automatically wraps everything in proper instance objects.

You have to pass the { raw: true } option in your find queries so that the data is returned as a POJO as opposed to instances of the Sequelize Model Class. You have correctly identified that because I can see you have that set. However, you are going to kick yourself for this because you need to use req.params.id instead of req.body.id here:

static async editUser(req, res) {
    //const id = req.body.id; //< Delete this
    const id = req.params.id //< Add this
    console.log("ID: ",id);
    const user = await User.findOne({where:  {id: id }, raw: true});
    res.render('editUser', { user });
  }

This is because you are sending the id as a query parameter in the url and not posting it in a form.