How can I list different caregory in different div?

时间:2018-03-25 19:14:02

标签: javascript node.js mongoose backend ejs

I'm trying to build a flash game website searching tutorials watch videos. I'm using Node.js, MongoDB, ejs, bodyparser... .I can listing games on home page but My problem is I don't know how can list games by categories in different div. Trying do something like this:

|----------------------------------|
| Strategy Games                   |
|                                  |
|   BOX     BOX     BOX      BOX   |
|                                  |
|   BOX     BOX     BOX      BOX   |
|                                  |
|   BOX     BOX     BOX      BOX   |
|__________________________________|

|----------------------------------|
| Tower Def Games                  |
|                                  |
|   BOX     BOX     BOX      BOX   |
|                                  |
|   BOX     BOX     BOX      BOX   |
|                                  |
|   BOX     BOX     BOX      BOX   |
|__________________________________|

My mongoose Schema:

     var gameName = mongoose.Schema({
         // _id:mongoose.Schema.Types.ObjectId,
         gameName: {type:String, required:"can not be empty"},
         gameCategorie: {type:String, required:"can not be empty"},
         gameImg: {type:String, required:"can not be empty"},
         gamePath: {type:String, required:"bcan not be empty"},
         gameTags: {type:String, required:"can not be empty"},
         editor: {type:String, required:"can not be empty"},
 });

Home page:

    <div class="container" >
    <div class="new-game">

            <div class="games">
              <h6 class= "yeniOyun" style="text-align: left; color:cyan;">Yeni Oyunlar</h6>
              <ul class="games-thumb"> 
                  <%  gamesInfo.forEach(  (game)=>{ %>
                  <li>
                    <a href="/oyun/<%= game._id %>" class="sa">
                      <img src="<%=game.gameImg%>" alt="">
                    </a>
                    <span><%=game.gameName%></span>
                  </li>
                  <% } );                   %>
                    </ul>
                </div>
          </div>
          <div>
          <div class="games">
            <h6 class= "yeniOyun" style="text-align: left; color:crimson;">Strateji Oyunları</h6>
            <ul class="games-thumb">
 --------------Im Trygin Something Like This ^^ obviously not working-----------
                <%  if(gamesInfo.gameCategorie ===[ "strateji"]) { %>
                <%  gamesInfo.forEach(  (game)=>{ %>
                <li>
                  <a href="/oyun/<%= game._id %>" class="sa">
                    <img src="<%=game.gameImg%>" alt="">
                  </a>
                  <span><%=game.gameName%></span>
                </li>
                <%});}%>
          </ul>
          </div>
          </div>
        </div>
    <% include ./partials/footer %>

And that's my home router

router.get('/', function(req, res) {
            gameName.find({},(err,gamesInfo)=>{
                if(err){
                    console.log("BANKAI")
                    console.log(err);
                }else{
                    res.render('home',{gamesInfo:gamesInfo} );
                }
            });
            }); 

1 个答案:

答案 0 :(得分:0)

我认为你把你的if语句放在了错误的地方。你必须首先使用for循环,并在for循环中使用if语句。

这就是我要尝试的(在伪代码中,您可以尝试在项目中实现实际代码):

<div class="strategyGames">
gamesInfo.forEach(game){
if(game.gameCategorie == "strategy"){
<li>
   <a href="/oyun/<%= game._id %>" class="sa">
    <img src="<%=game.gameImg%>" alt="">
   </a>
   <span><%=game.gameName%></span>
</li>
}
}
</div>

<br>

<div class="otherGames">
gamesInfo.forEach(game){
if(game.gameCategorie == "other"){  //other means the other category you want to list
<li>
   <a href="/oyun/<%= game._id %>" class="sa">
    <img src="<%=game.gameImg%>" alt="">
   </a>
   <span><%=game.gameName%></span>
</li>
}
}
</div>

希望这有帮助。