Node.js与Handlebars：解析字符串格式数组为可遍历数组

问题根源 #

核心问题是后端存储心愿项时未生成标准JSON格式字符串，或存储的字符串存在语法错误，导致JSON.parse失败。常见错误场景：

• 用Array.toString()替代JSON.stringify()转数组，得到逗号分隔的普通字符串（如item1,item2）而非JSON数组（["item1","item2"]）
• 存储的字符串使用单引号而非JSON要求的双引号
• 前端传参格式不规范，后端未做校验就直接转存

分步解决 #

1. 修复后端存储逻辑 #

确保将前端传入的心愿项数组转为标准JSON字符串后再存入数据库：

// 处理前端传入的心愿项，确保是数组格式
const wishItems = Array.isArray(req.body.items) ? req.body.items : [req.body.items];
// 转为标准JSON字符串
const listItemsStr = JSON.stringify(wishItems);

// 后续将listItemsStr存入MySQL的TEXT/LONGTEXT类型字段

注意：数据库字段类型建议用TEXT或LONGTEXT，避免长度限制截断JSON字符串。

2. 优先在后端解析后传至视图 #

从数据库查询数据后，先将存储的JSON字符串解析为数组，再传给Handlebars，简化模板逻辑：

// 查询数据库示例（以mysql2为例）
const [rows] = await connection.query('SELECT listItems FROM wishlists WHERE id = ?', [wishlistId]);
const wishlist = rows[0];

// 解析JSON字符串，添加错误捕获避免崩溃
try {
  wishlist.listItems = JSON.parse(wishlist.listItems);
} catch (err) {
  wishlist.listItems = []; // 解析失败时返回空数组
}

// 传给视图
res.render('wishlist', { wishlist });

此时模板中可直接遍历：

<ul>
  {{#each wishlist.listItems}}
    <li>{{this}}</li>
  {{/each}}
</ul>

3. 模板层处理（备选方案） #

如果必须在Handlebars模板中解析，注册自定义Helper处理解析和错误捕获：

// Node.js中注册Handlebars Helper
const hbs = require('express-handlebars').create({
  helpers: {
    parseJSON: function(str) {
      try {
        return JSON.parse(str);
      } catch (e) {
        console.error('JSON解析失败:', e);
        return [];
      }
    }
  }
});

app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

模板中调用Helper遍历：

<ul>
  {{#each (parseJSON listItems)}}
    <li>{{this}}</li>
  {{/each}}
</ul>

4. 排查存储内容合法性 #

登录数据库直接查看listItems字段的实际值，确认：

• 是标准JSON数组格式（如["笔记本电脑","机械键盘"]）
• 使用双引号而非单引号
• 无语法错误（如未闭合的引号、多余逗号）

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