前端替代后端执行搜索算法：accounts_array未定义问题求助

1. 后端正确传递数据到Handlebars模板 #

首先确保后端在渲染模板时，将accounts_array作为上下文数据传入。示例代码如下：

// Express路由示例
app.get('/accounts', (req, res) => {
  // 模拟从数据库/数据源获取账户数据
  const accounts_array = [
    { id: 1, name: '张三', email: 'zhangsan@example.com' },
    { id: 2, name: '李四', email: 'lisi@example.com' },
    { id: 3, name: '王五', email: 'wangwu@example.com' }
  ];
  // 渲染模板时将数据注入上下文，这里用`accounts`作为键名
  res.render('accounts', { accounts: accounts_array });
});

2. 在Handlebars模板中暴露数据给前端JS #

前端无法直接访问后端传入的模板变量，需要在模板中通过script标签将数据转换为全局JS变量。示例模板代码：

<!-- accounts.hbs 模板文件 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>账户搜索</title>
</head>
<body>
  <input type="text" id="searchInput" placeholder="输入关键词搜索...">
  <table id="accountTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>邮箱</th>
      </tr>
    </thead>
    <tbody>
      <!-- 初始渲染表格数据 -->
      {{#each accounts}}
      <tr>
        <td>{{id}}</td>
        <td>{{name}}</td>
        <td>{{email}}</td>
      </tr>
      {{/each}}
    </tbody>
  </table>

  <script>
    // 关键：用三个大括号{{{}}}输出JSON，避免Handlebars转义HTML字符
    const accounts_array = {{{JSON.stringify accounts}}};
    
    // 你的搜索逻辑
    const searchInput = document.getElementById('searchInput');
    const tableBody = document.querySelector('#accountTable tbody');

    searchInput.addEventListener('input', () => {
      const keyword = searchInput.value.toLowerCase();
      // 过滤数据得到结果数组
      const result_array = accounts_array.filter(item => {
        return item.name.toLowerCase().includes(keyword) || 
               item.email.toLowerCase().includes(keyword);
      });
      // 更新表格
      updateTable(result_array);
    });

    // 表格更新函数
    function updateTable(data) {
      tableBody.innerHTML = '';
      data.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${item.id}</td>
          <td>${item.name}</td>
          <td>${item.email}</td>
        `;
        tableBody.appendChild(row);
      });
    }
  </script>
</body>
</html>

核心注意点 #

• 后端传递数据时，必须将数组作为渲染上下文的一个属性（示例中是accounts），不能直接传裸数组。
• 模板中使用{{{JSON.stringify accounts}}}而非双括号{{}}，因为双括号会转义特殊字符，导致JSON格式失效，三个大括号会直接输出原始字符串，确保前端能解析为合法的JS数组。

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