如何在Node.js+Express中用Pug/Jade遍历对象数组并渲染列表

嘿，这事儿很简单，我帮你捋清楚怎么操作！

首先，你已经在app.js里把数据库查询到的对象数组results以storeItems的名字传给了Pug模板，这一步是对的。接下来只需要在Pug里用each迭代这个数组，提取你需要的键值对就行。

基础用法：渲染单个属性 #

假设你的storeItems数组里的每个对象长这样：

// 示例对象结构
{
  id: 1,
  itemName: "无线耳机",
  price: 199
}

如果只想渲染商品名称，直接在Pug里这么写：

ul
  each item in storeItems
    li= item.itemName

这和官方示例的逻辑完全一致，只是把数组元素换成了对象，然后取对应的属性值。

进阶用法：渲染多个属性 #

要是需要同时展示多个键值（比如名称+价格），可以在li标签里拆分内容，或者用模板字符串拼接：

ul.product-list
  each item in storeItems
    li.product-item
      span= item.itemName
      span.price= `¥${item.price}`
      // 或者直接用文本拼接
      // li= `${item.itemName} - 售价¥${item.price}`

优化：处理空数组情况 #

为了避免数据库没查到数据时页面出现空列表，建议加个条件判断：

if storeItems.length > 0
  ul.product-list
    each item in storeItems
      li= `${item.itemName} - 售价¥${item.price}`
else
  p.text-center 暂无商品信息

只要你确保storeItems确实是有效的对象数组（你已经用console.log验证过了），这样写完就能正常渲染出对应的HTML列表啦！

内容的提问来源于stack exchange，提问作者J.G.Sable