EJS MongoDb 拉取数组中的项目

Question

小总结：

我在 Node / Express / MongoDB / EJS 中有一个项目。

我正在设置代码来编辑数组，我的后端代码工作正常（使用 PostMan 测试）但是，我无法让我的前端工作。

当我点击 a.deleteskill 时，控制台和其他地方都没有反应。

型号：

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

路线：

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

控制器：

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文件（在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();
    });

  });

}

欢迎询问更多信息

Answer 1

document.getElementById('id_user_skill'); 将 return 一个 Element 而不是 userId。在你的情况下，$('#id_user_skill').text(); 将帮助 you.And 也 skill: ${id} 是不正确的数据。

对于application/x-www-form-urlencoded Content-Type（在ExpressJS中，你必须使用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();
    });

  });

}

对于application/json Content-Type（在ExpressJS中，你必须使用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();
    });

  });

}

EJS MongoDb 拉取数组中的项目

EJS MongoDb Pull items in array

jquery

ejs

mongoose

mongodb

node.js