使用 ejs 和 express 将数据显示到网格中答案

【问题标题】：Displaying data to a grid with ejs and express使用 ejs 和 express 将数据显示到网格中
【发布时间】：2020-07-28 18:58:10
【问题描述】：

我试图做的是在为每个循环创建的网格中使用 newsAPI 显示新闻，并随机化它在每次迭代中的外观。我遇到的问题很明显，我每次循环时都会接收 3 或 2 个但只有一个来自 express 的数据实例。我试图弄清楚如何保持网格随机化并接收网格内每个 div 的确切数据数量。由于这里很难解释是代码：

EJS：

<div class="col-md-12">
                    <% let current = -1 %>
                    <% data.forEach(function(news){ %>
                        <% let count = Math.floor( Math.random() * Math.floor(4)) %>
                        <% if(count == 0 && count !== current){ %>
                        <div class="row py-2 px-1">
                            <div class="col-sm-12 col-md-8 bg border mainGrid">duh</div>
                            <div class="col-sm-12 col-md border mainGrid"></div>
                        </div>
                        <% current = count %>
                        <%}else if(count == 1 && count !== current){ %>
                        <div class="row py-2 px-1">
                            <div class="col-sm-12 col-md-5 bg border mainGrid">duh</div>
                            <div class="col-sm-12 col-md border mainGrid"></div>
                            <div class="col-sm-12 col-md-5 bg border mainGrid">duh</div>
                        </div>
                        <% current = count %>
                        <%}else if(count == 2 && count !== current){ %>
                        <div class="row py-2 px-1">
                            <div class="col-sm-12 col-md-3 bg border mainGrid">duh</div>
                            <div class="col-sm-12 col-md border mainGrid"></div>
                        </div>
                        <% current = count %>
                        <%}else if(count == 3 && count !== current){ %>
                            <div class="row py-2 px-1">
                                <div class="col-sm-12 col-md-4 bg border mainGrid">duh</div>
                                <div class="col-sm-12 col-md border mainGrid"></div>
                                <div class="col-sm-12 col-md-6 bg border mainGrid">duh</div>
                            </div>
                            <% current = count %>
                            <%}%>
                            
                        <% }) %>

快递：

router.get("/",(req,res) => {
    newsapi.v2.topHeadlines({
        sources: 'bbc-news,the-verge',
        language: 'en',
        pageSize: 9
        
      }).then(response => {

        let data = response.articles;
        console.log(data);
        res.render("index",{data:data})
      });
      
})

module.exports = router;

提前致谢！

【问题讨论】：

标签： javascript node.js express ejs

【解决方案1】：

如果有人想知道我是如何解决的：

       <div class="col-md-12">
                    <% let current = 0 %>
                    <% let count = 0 %>
                    <% let currentCount = 0 %>
                    <% data.forEach(function(news){ %>
                      <%    if(current === 1){ %>
                        <%let gridcount = Math.floor((12 - count)/2); %>
                        <div class="col-sm-12 col-md-<%=gridcount%> border mainGrid">
                            <h2>
                                <%= news.title %>
                            </h2>
                            <p>
                                <%= news.description %>
                            </p>
                    </div>
                
            
                    <% current = 2 %>
                <%  }else if(current == 0){ %>
                    <% while(count == currentCount){ %>
                    <% count = Math.floor( Math.random() * Math.floor(4)) +3 %>
            <%  } %>
                    <div class="row">
                        
                    <div class="col-sm-12 col-md-<%=count%> border mainGrid">
                        <h2>
                                <%= news.title %>
                            </h2>
                            <p>
                                <%= news.description %>
                            </p></div>
                    <% currentCount = count %>
                    <% current = 1 %>
                <%  }else if(current == 2){%>
                            
                                <div class="col-sm-12 col-md border mainGrid">
                        <h2>
                                <%= news.title %>
                            </h2>
                            <p>
                                <%= news.description %>
                            </p>
                    </div>
                    </div>
                    <% current = 0 %>
                    <%  } %>
                        <% }) %>
                    
                   
                </div>

【讨论】：