检查数组中的 likes 对象后，对数组进行排序以显示 8 个项目

Question

我有一个对象数组，我正在像这样循环：

<% for(post of posts) { %> 
           
            <% if(post.likes > 5){ %> 
            <div class="col">
                <div class="card d-flex flex-column text-white mb-2" style="width: 18rem;">
                    <img src="<%=post.image%>" class="card-img" style="height: 300px;width: auto;" alt="...">
                    <div class="card-img-overlay align-self-end">
                        <h5  style="background-color: white;color: black;border-radius: 10px; text-align: center;" class="card-title"><%=post.title%> </h5>
                        <p style="text-shadow: 0.5px 0.5px 0.5px #00000050;" class="card-text"><%=post.content.slice(0,105)%>...</p>
                        <a href="/home/<%=post._id%>" class="btn btn-primary shadow">Continue Reading</a>
                        
                    </div>
                    <div class="d-flex justify-content-between">
                    <div style="color: black;" class="card-footer bg-transparent"><%=post.likes%> <span> </span> <i style="color: red;" class="fas fa-heart d-inline"></i></div>
                    <% if(!post.date){ %> 
                        <div style="color: black;" class="card-footer bg-transparent">Test Mode <span> </span> <i class="fas fa-calendar-alt"></i></div>
                        <% }else{ %> 
                    <div style="color: black;" class="card-footer bg-transparent"><%=post.date%> <span> </span> <i class="fas fa-calendar-alt"></i></div>
                    <% } %> 
                    </div>
                </div>
            </div>
            
            <% } %> 
            
        <% } %>

它显示所有点赞超过 5 的项目，但我只想显示点赞超过 5 的 8 个项目。我已经尝试了几个小时，但无法正常工作。请帮忙。我是初学者！！

Answer 1

试试这个代码

<% let validPostCount = 0; %>
<% for(post of posts) { %> 
           
            <% if(post.likes > 5 && validPostCount < 8){ %> 
            <% validPostCount++ %>
            <div class="col">
                <div class="card d-flex flex-column text-white mb-2" style="width: 18rem;">
                    <img src="<%=post.image%>" class="card-img" style="height: 300px;width: auto;" alt="...">
                    <div class="card-img-overlay align-self-end">
                        <h5  style="background-color: white;color: black;border-radius: 10px; text-align: center;" class="card-title"><%=post.title%> </h5>
                        <p style="text-shadow: 0.5px 0.5px 0.5px #00000050;" class="card-text"><%=post.content.slice(0,105)%>...</p>
                        <a href="/home/<%=post._id%>" class="btn btn-primary shadow">Continue Reading</a>
                        
                    </div>
                    <div class="d-flex justify-content-between">
                    <div style="color: black;" class="card-footer bg-transparent"><%=post.likes%> <span> </span> <i style="color: red;" class="fas fa-heart d-inline"></i></div>
                    <% if(!post.date){ %> 
                        <div style="color: black;" class="card-footer bg-transparent">Test Mode <span> </span> <i class="fas fa-calendar-alt"></i></div>
                        <% }else{ %> 
                    <div style="color: black;" class="card-footer bg-transparent"><%=post.date%> <span> </span> <i class="fas fa-calendar-alt"></i></div>
                    <% } %> 
                    </div>
                </div>
            </div>
            
            <% } %> 
            
        <% } %>

检查数组中的 likes 对象后，对数组进行排序以显示 8 个项目

Sort array to display 8 items after checking the likes object in the array

javascript

arrays

ejs