EJS渲染JSON数据：按指定字段排序展示与数值运算实现方案咨询

嘿，针对你用EJS渲染JSON商品数据时遇到的排序和数值运算问题，我给你整理了具体的解决方案，一起来看看：

一、实现商品按指定字段排序后渲染 #

你当前的代码是分开渲染每个item分组，其实可以通过合并统一排序或者分组内排序两种方式实现按price或name排序后渲染：

1. 合并所有商品后统一排序（推荐） #

这种方式更灵活，适合需要整体排序的场景，建议在后端（比如Node.js）先处理数据：

// 后端示例（Node.js + Express）
const rawItems = { 
  "item1": [ { "id": 1, "name": "Item1", "price": 50 } ], 
  "item2": [ { "id": 2, "name": "Item2", "price": 15 } ], 
  "item3": [ { "id": 3, "name": "Item 3", "price": 10 } ] 
};

// 把所有分组的商品合并成一个数组
const allItems = Object.values(rawItems).flat();

// 按需选择排序方式：
// ① 按price升序
allItems.sort((a, b) => a.price - b.price);
// ② 按price降序
// allItems.sort((a, b) => b.price - a.price);
// ③ 按name字母顺序（忽略空格）
// allItems.sort((a, b) => a.name.replace(/\s+/g, '').localeCompare(b.name.replace(/\s+/g, '')));

// 将排序后的数组传给EJS模板
res.render('your-template', { items: allItems });

然后在EJS模板里统一渲染即可，不用再分开处理每个分组：

<section class="container content-section"> 
  <% items.forEach(function(item){ %> 
    <div class="shop-item" data-item-id="<%= item.id %>"> 
      <span class="shop-item-title"><%= item.name %></span> 
      <span class="shop-item-price">$<%= item.price / 100 %></span> 
    </div>
  <% }) %> 
</section>

2. 保留分组，对每个子数组单独排序 #

如果必须保留原有的item1/item2/item3分组，也可以直接在EJS模板里对每个分组的数组排序：

<!-- 按price升序渲染item1分组 -->
<section class="container content-section"> 
  <% items.item1.sort((a, b) => a.price - b.price).forEach(function(item){ %> 
    <div class="shop-item" data-item-id="<%= item.id %>"> 
      <span class="shop-item-title"><%= item.name %></span> 
      <span class="shop-item-price">$<%= item.price / 100 %></span> 
    </div>
  <% }) %> 
</section>

<!-- 其他分组同理，替换排序逻辑即可 -->

二、对数值字段执行数学运算 #

针对price乘2这类需求，有两种实用方式：

1. 在EJS模板内直接运算 #

你已经用到了item.price / 100的运算逻辑，同理可以直接在模板里做乘法，甚至结合toFixed()控制小数位数：

<!-- 直接将price乘2后显示，保留2位小数 -->
<span class="shop-item-price">$<%= ((item.price * 2) / 100).toFixed(2) %></span>

2. 后端提前处理数据（更高效） #

如果所有商品都需要执行相同的数值运算，建议在后端提前处理好再传给EJS，避免模板里重复计算：

// 后端处理示例
const processedItems = Object.values(rawItems).flat().map(item => ({
  ...item,
  price: item.price * 2 // 提前将price乘以2
}));

res.render('your-template', { items: processedItems });

之后在模板里直接使用处理后的price即可：

<span class="shop-item-price">$<%= item.price / 100 %></span>

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