Small summary:

I have a project in Node / Express / MongoDB / EJS.

I'm setting up the code to edit the arrays, my backend code is working fine (test with PostMan) However, I can't get my frontend to work.

When I click on a.deleteskill there is no reaction neither in the console nor otherwise.

models :

skills: {
  type: [
    {
      skill: String,
      level: String,
    },
  ],
},

routes:

router.put('/deleteskills/:id/:skill', userController.deleteskill);

controller :

module.exports.deleteskill = async (req, res) => {
  const {skill} = req.body;
  try {
    
    await Model.findOneAndUpdate(
      { _id: req.params.id },
      {
        $pull : { 
          skills: {
            skill: langue,
            }
        }
      },
     
      (err, docs) => {
        if (!err) return res.send(docs);
        if (err) return res.status(500).send({ message: err });
      }
    );
  }   
catch (err) {
  return res.status(500).json({ message: err });
  
  }
};

ejs:

<table class="tablebox tableskill">
   <thead>
   <th>Langues</th>
   <th>Niveau</th>
</thead>
<tbody>
   <div  style="display: none;"><p id="id_user_skill"><%= user._id%></p></div>
<% for(let j = 0; j < user.skills.length; j  ) { %>
   <tr>
   <td>
     <input class="skilllist" type="text" name="skill" value="<%= user.skills[j].skill %>" >
   </td>
   <td>
      <input type="text" name="level" value="<%= user.skills[j].level %>">
   </td>
   <td>
      <a class="deleteskill" data-user-id="<%= user._id%>" data-id="<%= user.skills[j].skill %>" >
         <span class="material-icons icon-table delete-btn">
            clear
         </span>
      </a>
   </td>
   </tr>
<% } %>
</tbody>
</table>

JS file (refered in the ejs):

userid = document.getElementById('id_user_skill');

if (window.location.pathname == "/user/edit-user" || window.location.search == `?id=${userid}` ) {

  $ondelete = $(".tableskill tbody td a.deleteskill");

  $ondelete.click(function () {

    let id = $(this).attr("data-id");
    let iduser = $(this).attr("data-user-id");
    let skilldata = `skill: ${id}`

    let deleteskill = {
      url: `/api/user/deleteskills/${iduser}/${id}`,
      method: "PUT",
      data: skilldata
    };

    $.ajax(deleteskill).done(function (response) {
      location.reload();
    });

  });

} 

Feel free to ask more informations

CodePudding user response：

document.getElementById('id_user_skill'); will return an Element instead of userId. In your case, $('#id_user_skill').text(); will help you.And also skill: ${id} is not correct data.

For application/x-www-form-urlencoded Content-Type (In ExpressJS, you must be using app.use(express.urlencoded()); )

userid = $('#id_user_skill').text().trim();

if (window.location.pathname == "/user/edit-user" || window.location.search == `?id=${userid}` ) {

  $ondelete = $(".tableskill tbody td a.deleteskill");

  $ondelete.click(function () {

    let id = $(this).attr("data-id");
    let iduser = $(this).attr("data-user-id");
    let skilldata = {
      skill: id
    }

    let deleteskill = {
      url: `/api/user/deleteskills/${iduser}/${id}`,
      method: "PUT",
      data: skilldata
    };

    $.ajax(deleteskill).done(function (response) {
      location.reload();
    });

  });

} 

For application/json Content-Type(In ExpressJS, you must be using app.use(express.json()); )

userid = $('#id_user_skill').text().trim();

if (window.location.pathname == "/user/edit-user" || window.location.search == `?id=${userid}` ) {

  $ondelete = $(".tableskill tbody td a.deleteskill");

  $ondelete.click(function () {

    let id = $(this).attr("data-id");
    let iduser = $(this).attr("data-user-id");
    let skilldata = {
      skill: id
    }

    let deleteskill = {
      url: `/api/user/deleteskills/${iduser}/${id}`,
      method: "PUT",
      data: JSON.stringify(skilldata),
      headers: {
        'Content-Type': 'application/json'
      }
    };

    $.ajax(deleteskill).done(function (response) {
      location.reload();
    });

  });

}