Handlebars模板引擎中JSON.parse失效及前端搜索实现问题

问题根源 #

后端从MySQL查询返回的RowDataPacket对象，直接传递给Handlebars模板时，模板会默认把对象转为"[object Object]"字符串——这不是有效的JSON格式，所以前端用JSON.parse()解析时会抛出语法错误。

解决步骤 #

1. 后端先将RowDataPacket转为纯JSON格式 #

在后端把查询结果转换成普通JSON对象，再传递给Handlebars模板，而非直接传递RowDataPacket实例。以Node.js环境为例：

// 假设使用mysql2或mysql模块执行查询
const [rows] = await connection.query('SELECT * FROM accounts');
// 将RowDataPacket数组转为纯JSON对象数组
const accountsArray = JSON.parse(JSON.stringify(rows));
// 把处理后的数组传给Handlebars模板
res.render('your-template', { accounts_array: accountsArray });

这样处理后，后端传递给模板的是标准JSON结构，而非带有原型链的RowDataPacket对象。

2. 前端正确获取并使用数据 #

在Handlebars模板的script标签中，直接将数据赋值给变量，无需再调用JSON.parse()：

<script>
// 直接接收后端传递的JSON数组（用三个大括号避免转义）
const accounts = {{{accounts_array}}};

// 实现搜索筛选功能
const searchInput = document.getElementById('search-input');
const tableRows = document.querySelectorAll('#accounts-table tr');

searchInput.addEventListener('input', function(e) {
  const searchTerm = e.target.value.toLowerCase();
  tableRows.forEach(row => {
    // 根据表格实际结构调整内容获取逻辑
    const rowText = row.textContent.toLowerCase();
    row.style.display = rowText.includes(searchTerm) ? '' : 'none';
  });
});
</script>

这里必须用三个大括号{{{}}}，Handlebars会不转义地输出JSON结构，直接成为合法的JavaScript数组。如果用两个大括号{{}}，JSON会被转义成字符串，仍会触发解析错误。

关键注意点 #

• 不要对已经是JavaScript对象的数据调用JSON.parse()，否则会把对象转为"[object Object]"字符串后再解析，必然报错。
• 后端用JSON.stringify()转换RowDataPacket时，会忽略对象的原型链，只保留可枚举属性，刚好符合前端需要的纯数据结构。

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