如何在HTML页面展示MySQL数据？Handlebars显示[Object object]问题

我用Node.js搭配MySQL、Express和Handlebars开发，通过router.get('/tchat')接口将MySQL查询结果以{data: results}的形式传递给模板，数据已成功传递，但在tchat.hbs模板中用{{data}}获取数据时，页面显示[Object object]，而非预期的email值。

后端接口代码 #

router.get('/tchat', authController.isLoggedIn, (req, res) => {
  console.log(req.user);
  if( req.user ) {
    db.query("SELECT email from users WHERE name = ?", ["Fada"], function (err, results) {
      if(err) throw err;
      res.render('tchat', {
        user: req.user,
        data: results
      });
    })
  } else {
    res.redirect('/login');
  }
})

前端tchat.hbs模板代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="tchat.css">
    <title>Document</title>
</head>
<body>
    <p id="pp">{{user.name}}</p>
    <div>
        <ul id="messages"></ul>
        <input id="m" /> <button onclick="send()" id="btn">Send</button>
    </div>

    <p>unordered list</p>
    <p>{{data}}</p>
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js" integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script>
    <script src="/test.js"></script>
</body>
</html>

解决方案 #

问题原因 #

MySQL的db.query返回的results是对象数组，比如查询到单条数据时结构为[{ email: 'xxx@example.com' }]。直接在Handlebars中输出{{data}}会将数组转为字符串，显示[Object object]。

具体解决方式 #

1. 仅查询单条数据时：直接取数组第一个元素的email字段

<p>{{data.[0].email}}</p>

或简化写法：

<p>{{data.0.email}}</p>

2. 查询多条数据时：用Handlebars的{{#each}}循环遍历数组，逐个输出email

<ul>
  {{#each data}}
    <li>{{email}}</li>
  {{/each}}
</ul>

验证建议 #

可以在后端代码中添加console.log(results)，确认返回数据的结构，确保理解数据的层级关系。

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