Node.js+Mongoose项目：如何用for循环仅展示前5个itemsSmall数据

一、前端通过for循环控制渲染数量 #

方式1：先筛选再循环渲染 #

先筛选出符合image._id匹配的itemsSmall，再通过for循环只渲染前5条：

<div>
  <% 
    // 筛选匹配当前image的itemsSmall
    const matchedItems = itemsSmall.filter(item => String(image._id) === String(item.imageId));
    // 截取前5条待展示数据
    const displayItems = matchedItems.slice(0, 5);
    // for循环遍历渲染
    for(let i = 0; i < displayItems.length; i++) {
      const item = displayItems[i];
  %>
    <div class="position-relative">
      <p class="d-inline-block"><strong><%= item.title %>:</strong> <%= item.smallInformation %></p>
      
      <div class="position-absolute top-0 end-0">
        <% if(image.userId == user.userId || user.admin > 2){ %>
        <form action="/view/deleteSmall/<%= item._id %>?_method=delete" method="POST">
          <textarea name="imageId" id="imageId" hidden><%= image._id %></textarea>
          <button class="btn btn-sm btn-danger float-right me-md-2" type="submit">delete</button>
        </form>
        <%}%>
      </div>
    </div>
  <% } %>
</div>

方式2：循环内计数终止 #

不提前筛选，在循环中匹配条件并计数，达到5条后直接终止循环：

<div>
  <% 
    let displayCount = 0;
    // 循环遍历所有itemsSmall，同时限制展示数量不超过5
    for(let i = 0; i < itemsSmall.length && displayCount < 5; i++) {
      const item = itemsSmall[i];
      if(String(image._id) === String(item.imageId)) {
  %>
    <div class="position-relative">
      <p class="d-inline-block"><strong><%= item.title %>:</strong> <%= item.smallInformation %></p>
      
      <div class="position-absolute top-0 end-0">
        <% if(image.userId == user.userId || user.admin > 2){ %>
        <form action="/view/deleteSmall/<%= item._id %>?_method=delete" method="POST">
          <textarea name="imageId" id="imageId" hidden><%= image._id %></textarea>
          <button class="btn btn-sm btn-danger float-right me-md-2" type="submit">delete</button>
        </form>
        <%}%>
      </div>
    </div>
  <% 
        displayCount++;
      }
    }
  %>
</div>

二、后端优化（减少无效数据传输） #

当前后端会查询所有itemsSmall再传给前端，浪费带宽和性能。建议直接在数据库层面筛选匹配imageId的记录，并限制返回前5条：

router.get("/:id", (req, res) => {
  const id = req.params.id;
  Image.findById(id)
    .then((result) => {
      // 并行查询优化嵌套Promise结构
      Promise.all([
        itemsBig.find().sort({ CreatedAt: -1 }),
        // 直接筛选匹配当前imageId的记录，排序后取前5条
        itemsSmall.find({ imageId: result._id }).sort({ CreatedAt: -1 }).limit(5)
      ]).then(([itemsBig, itemsSmall]) => {
        res.render("pictureDetail", {
          itemsSmall: itemsSmall,
          itemsBig: itemsBig,
          image: result,
          picture: id,
          user: req.auth,
          title: "Details",
        });
      }).catch((err) => { console.log(err); });
    }).catch((err) => { console.log(err); });
});

内容的提问来源于stack exchange，提问作者Benjamin Venema