如何将Node.js/Express后端的MongoDB对象传递到前端JS变量中（Twig模板场景）

Hey there! I've run into this exact scenario before when working with Node/Express/Twig, so let me walk you through a couple of solid solutions to get that object into your frontend script.

方法1：直接在模板中注入全局JS变量 #

这是最简单直接的方式——你可以在Twig模板里添加一个<script>标签，把后端的object转成JSON格式后赋值给一个全局变量，然后你的objectGame.js就能直接访问它了。

步骤1：修改Twig模板 #

在引入objectGame.js之前，添加这段代码：

<script>
  // 将后端传递的object转为JSON并赋值给全局变量
  const gameObject = {{ object|json_encode|raw }};
</script>
<script src="/javascript/objectGame.js"></script>

• json_encode：Twig的过滤器，把后端对象转成标准JSON字符串
• raw：防止Twig自动转义特殊字符（比如引号），保证JSON格式能被前端正常解析

步骤2：在objectGame.js中使用变量 #

现在你可以直接在前端脚本里使用gameObject了：

// objectGame.js
console.log(gameObject.property1); // 输出后端传递的property1值
console.log(gameObject.property3); // 可以直接用来验证图片路径逻辑

方法2：通过HTML data属性传递对象 #

如果不想用全局变量，你可以把对象存储在某个HTML元素的data-*属性里，然后前端JS读取并解析它。

步骤1：修改Twig模板 #

给页面的根容器（比如一个包裹所有内容的div）添加data-object属性：

<div id="game-page-container" data-object="{{ object|json_encode|raw }}">
  <h2>Title1</h2>
  <div id="property1">{{object.property1}}</div>
  <h2>Title2</h2>
  <div id="property2">{{object.property2}}</div>
  <h2>Title3</h2>
  <div id="property3"><img src="/images/{{object.property3}}"></div>
</div>
<script src="/javascript/objectGame.js"></script>

步骤2：在objectGame.js中读取解析 #

// objectGame.js
const container = document.getElementById('game-page-container');
// 读取data属性并解析为JS对象
const gameObject = JSON.parse(container.dataset.object);

// 现在可以正常使用对象做各种操作
console.log(gameObject.property2);

重要注意事项 #

1. 处理MongoDB ObjectId：MongoDB文档里的_id是ObjectId类型，直接用json_encode会序列化出问题。你需要在控制器里把文档转成普通对象并把_id转为字符串：

// 修改控制器代码
exports.showObjectGame = (req, res) => {
  objectModel.findById(req.params.id)
    .exec()
    .then(object => {
      // 转成普通JS对象
      const plainObject = object.toObject();
      // 将ObjectId转为字符串，避免JSON序列化异常
      plainObject._id = plainObject._id.toString();
      res.render("objectGame.html.twig", {object: plainObject})
    })
    .catch(error => {
      console.log(error);
    })
}

2. 敏感数据风险：这两种方法都会把对象数据暴露在前端源码里，所以绝对不要传递包含敏感信息的字段（比如密码、用户隐私数据）。

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