如何在 html 表中合并重复项？

Question

我是一名初级开发人员，致力于我的第一个项目。我正在尝试在我的应用程序中创建一个统计页面，并且很难弄清楚如何显示我的数据以使其易于阅读。在类似的应用程序中，我看到了使用的表格格式。

我附上了我当前应用的统计页面的图像，但它为每个单独的数据库记录生成一行。我希望它能够在给定键（在这种情况下为 LP 名称）下组合重复项，所以我可以很容易地看到 Google 有 3 次点击，Yahoo 有 1 次点击，等等......

Stats page image

我正在 node & express 中构建我的应用程序（ejs 用于我的模板引擎），使用 mongodb 作为我的数据库。我只能在前端使用 Javascript 和 Jquery 实现这一点吗？ （我主要不熟悉 Jquery）我可以通过我的后端堆栈以某种方式实现这一点吗？

现在，我只是在循环浏览我的数据库并显示存储的数据：

<table class="ui striped table">
      <thead>
      <tr>
        <th>LP Name</th>
        <th>URL</th>
        <th>Clicks</th>
        <th>Cost</th>
        <th>Conversions</th>
        <th>Revenue</th>
        <th>ROI</th>
      </tr>
    </thead>
    <tbody>
      <% stats.forEach(function(stat){ %>
      <tr>
        <td><%= stat.visited.name %></td>
        <td><%= stat.visited.URL %></td>
        <td><%= stat.hit %></td></td>
        <td><%= stat.cost %></td></td>
        <td><%= stat.conversion.value %></td>
        <td><%= stat.conversion.amount %></td>
        <td>69%</td>
      </tr>
      <% }) %>
    </tbody>
  </table>

另外，这是我的快递路线：

app.get("/campaigns/:id",function(req,res){
    Stat.find({cid:req.params.id},function(err,foundStats){
        if(err){
            console.log(err);
            res.redirect("/");
        }else{
            res.render("campaigns/show",{stats:foundStats});
        }
    });
});

Answer 1

最好的方法是从后端，在根据 LP 名称从 mongodb 获取记录的同时对记录进行分组，这可以使用 mongodb aggregate 轻松完成

使用以下代码更新您的路由处理程序：

请记住，您需要使用正确的数据库字段名称来更新它，例如：lp_name ...等

app.get("/campaigns/:id", function(req, res) {
    Stat.aggregate([{
            $match: { cid: req.params.id }
        },
        {
            $group: {
                _id: { _id: "$lp_name", _url: "$url" },
                price: { $sum: "$price" },
                clicks: { $sum: "$clicks" },
                cost: { $sum: "$cost" },
                conversions: { $sum: "$conversions" },
                revenue: { $sum: "$revenue" }
            }
        },
        {
            $project: {
                _id: 0,
                url: "$_id._url",
                lp_name: "$_id._id",
                price: 1,
                clicks: 1,
                cost: 1,
                conversions: 1,
                revenue: 1
            }
        }
    ], (err, foundStats) => {
        if (err) {
            console.log(err);
            res.redirect("/");
        } else {
            res.render("campaigns/show", { stats: foundStats });
        }
    });
});