htmlテーブルで重複を結合するにはどうすればいいですか？

Question

私は最初のプロジェクトに取り組んでいるジュニア開発者です。私はアプリケーションで統計ページを作成しようとしていますが、データを簡単に読み込めるようにデータを表示する方法を考え出すのは難しいです。同様のアプリケーションでは、私は使用されるテーブル形式を見た。

私の現在のアプリの統計ページの画像を添付しましたが、個々のデータベースレコードごとに行が生成されています。 ... Yahooはなど、1回のクリックを持って、私は与えられたキー（この場合はLP名）の下で、重複を組み合わせることができるようにしたいので、私は簡単にGoogleは3回のクリックを持っていることを見ることができました

Stats page image

私のデータベースにmongodbを使ってノード& express（私のテンプレートエンジンのejs）に自分のアプリケーションを構築しています。 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

あなたのルートを更新するha ndler以下のコードで：

は、あなたが正しいデータベースとそれを更新する必要が念頭に置いておく

名前の元をフィールド：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 }); 
     } 
    }); 
});