使用node.js req.params.id并将匹配的id数据插入到同一页面中的模态

时间:2018-04-17 18:00:54

标签: node.js express ejs

您好我需要协助将数据从正文插入到基于用户选择的模态。例如,我有一个带按钮的页面,每个按钮数据包含名字和姓氏。当用户选择按钮时,我使用req.params.id来匹配mongoDB中的数据以返回名称。我知道如何使用两个不同的页面执行此操作,但我想用一个页面执行此操作。

这是我的代码,用于呈现路由并从mongoDB获取所有数据,

app.get("/timesheet", (req, res) => {
    Reg.find({}, (err, allReg) => {
        if(err){
            console.error(err);
        } else (
            res.render("log", { reg: allReg })
        )
    });
});

我使用EJS执行forEach来显示每组数据,当前使用anchor元素将它们显示为按钮,因此我可以使用params.id设置href。

<% reg.forEach(function(entries){ %>
<a href="/timesheet/<%= entries._id %>" class="btn btn-outline-primary" data-toggle="modal" data-target="#childList">
    <%= entries.firstName %>
    <%= entries.lastName %>
</a>
  <% }); %>
  </div>

以下是获取req.params.id

的路线
app.get("/timesheet/:id", (req, res) => {
    Reg.findById(req.params.id, (err, foundReg) => {
        if(err){
            console.error(err);
        } else {
        res.render("log", { reg: foundReg });
        }
    });
});

当我点击模态打开的任何按钮时,我希望相关数据显示在模态中。每个按钮打开相同的模态,但它应该是动态的,基于用户点击的按钮。

<div class="modal fade" id="childList" tabindex="-1" role="dialog" aria-labelledby="childListLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="childListLabel"></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true"><i class="fas fa-times-circle"></i></span>
              </button>
            </div>
            <div class="modal-body">
                   <%= reg.firstName %>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-danger">Check In</button>
            </div>
          </div>
        </div>
      </div>

0 个答案:

没有答案