有没有办法可以将 mongodb 集合作为有序列表发送到 ejs 文件？答案

【问题标题】：Is there a way I can send a mongodb collection to an ejs file as an ordered list?有没有办法可以将 mongodb 集合作为有序列表发送到 ejs 文件？
【发布时间】：2020-03-26 14:59:22
【问题描述】：

我只能在自己的路由中将集合显示为 json 对象，但我想让集合显示在我的 index.ejs 文件下的列表中（我是 ejs 和 MongoDB 的新手） .

这是我可以在 localhost:3000/signups 中看到 json 对象的代码：

  app.get("/signups", (req, res) => {
    volunteer.find({}, function(err, foundData) {
    if(err){
     res.send('Oops, something went wrong!');
     next();
    }
    res.json(foundData);
  });
 });

这是我的 index.ejs：

<body>
 <h1>Hi <%= name %></h1>

 <h1>Volunteers:</h1>

 <!--I want to list all volunteers from the mongodb collection-->
 <div id="volunteer-table"></div>
 </body>

这是我在 mongo shell 中使用 db.volunteers.find().pretty() 时看到的：

[{"_id":"5dc0e9540d7f0781882910e1","firstName":"michael","lastName":"Scott","email":"ms@dunder.com","__v":0},]

【问题讨论】：

标签： javascript node.js json mongodb ejs

【解决方案1】：

有几种方法可以做到这一点。一种方法是编辑您的索引路线以获取志愿者并将他们直接发送到 EJS 模板。像这样的东西应该可以解决问题（未经测试，因此可能需要编辑）：

app.get('/', function(req, res) {
    volunteer.find({}, function(err, foundData) {
        if (err){
            res.send('Oops, something went wrong!');
            next();
            return;
        }

        // pass volunteers directly into page
        res.render('index', {
            name: 'My Page',
            volunteers: foundData,
        });
    });
});

index.ejs：

<table>
<% for (var i=0; i < volunteers.length; i++) { %>
   <tr>
     <td><%= volunteers[i].firstName %></td>
     <td><%= volunteers[i].lastName %></td>
     <td><%= volunteers[i].email %></td>
   </tr>
<% } %>
</table>

首选方法

另一种方法是保持索引路由不变，并从前端请求志愿者端点。你甚至不需要使用 EJS。在我看来，这是更好的选择，因为它将前端渲染与后端分离（使您的应用程序更加灵活）。

例如：

index.ejs：

<body>
    <h1>Hi <%= name %></h1>

    <h1>Volunteers:</h1>

    <div id="volunteer-table"></div>
</body>

<script>
    async function main() {
        // fetch volunteers
        const response = await fetch('/signups');
        const volunteers = await response.json();

        // build an HTML table
        let volunteerTable = "<table>";
        for (const volunteer of volunteers) {
            volunteerTable += `
            <tr>
                <td>${volunteer.firstName}</td>
                <td>${volunteer.lastName}</td>
                <td>${volunteer.email}</td>
            </tr>
            `;
        }
        volunteerTable += "</table>";

        // insert the table into the view
        document.getElementById('volunteer-table').innerHTML = volunteerTable;
    }

    main();
</script>

（同样，未经测试，因此上述代码可能需要稍作修改。）

这种方法与 React 或 Vue 等前端框架配合使用会更好。

【讨论】：

@burnsie 很高兴我能帮上忙！