Express图书应用中EJS无法动态渲染数组内角色名称问题求助

问题根源 #

1. 固定索引book.characters[0].name会重复渲染同一个角色，因为每次循环都指向数组的第一个元素。
2. 硬编码循环范围i=1到i<4的问题：
   • 数组索引从0开始，i=3时book.characters[3]不存在（你的模拟数据中每本书只有3个角色，索引为0、1、2），直接访问name属性就会触发Cannot read properties of undefined错误。
   • 固定循环次数不灵活，后续如果图书角色数量变化，代码会直接失效。

正确解决方案 #

直接遍历book.characters数组，根据实际角色数量动态渲染，推荐两种写法：

写法1：使用forEach遍历（更简洁）

<div class="data-m1">
  <h4>Characters</h4>
  <div class="characters">
    <% book.characters.forEach(character => { %>
    <div class="portrait">
      <img class="book-c" src="/images/book-c-1.png" alt="book" />
      <p><%= character.name %></p>
    </div>
    <% }) %>
  </div>
</div>

写法2：使用基于数组长度的for循环

<div class="data-m1">
  <h4>Characters</h4>
  <div class="characters">
    <% for (let i = 0; i < book.characters.length; i++) { %>
    <div class="portrait">
      <img class="book-c" src="/images/book-c-1.png" alt="book" />
      <p><%= book.characters[i].name %></p>
    </div>
    <% } %>
  </div>
</div>

额外优化建议 #

路由中参数名title不符合实际用途（实际传的是图书ID），建议修改为语义化的id，同时增加图书不存在的判断：

router.get("/books/:id", function (req, res, next) {
  const bookId = parseInt(req.params.id);
  const book = data.PopularBooks.find((book) => book.id === bookId);
  
  if (!book) {
    return res.status(404).send("指定图书不存在");
  }
  
  res.render("books", { book });
});

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