ExpressJS+Handlebars环境下，如何获取对象数组{{graph}}的值？

嘿，我之前也踩过完全一样的坑！问题根源在于Handlebars的默认行为：它会对所有模板输出的内容做HTML转义。你直接用{{graph}}的话，数组会被转成一串带转义字符的字符串，而不是Morris.Line需要的原生JavaScript对象，所以控制台才会抛出异常。

下面给你几个靠谱的解决方案，按简单到严谨的顺序排列：

方法1：使用Handlebars三重花括号（最直接） #

Handlebars的三重花括号{{{ }}}会跳过HTML转义，直接输出原始内容。把你的代码改成这样：

<script>
  new Morris.Line({
    element: 'myfirstchart',
    parseTime: false,
    data: {{{graph}}}, <!-- 这里改成三重花括号 -->
    xkey: 'version',
    ykeys: ['success'],
    labels: ['Success']
  });
</script>

⚠️ 注意：这个方法要确保graph数组里的内容是安全的——比如没有用户输入的恶意脚本，因为跳过转义可能会带来XSS风险。如果你的数据是自己生成的、无外部输入，这个方法完全没问题。

方法2：后端转成JSON字符串，前端直接使用 #

如果你担心XSS风险，或者需要更严谨的处理，可以在Express路由里先把数组转成JSON字符串：

// 你的Express路由代码
app.get('/', (req, res) => {
  // 假设yourGraphArray是你的原始对象数组
  const yourGraphArray = [
    { version: 'v1', success: 85 },
    { version: 'v2', success: 92 }
  ];
  // 转成JSON字符串传给模板
  res.render('index', { graph: JSON.stringify(yourGraphArray) });
});

然后前端模板里直接用{{graph}}（因为已经是合法的JSON字符串了）：

<script>
  new Morris.Line({
    element: 'myfirstchart',
    parseTime: false,
    data: JSON.parse({{graph}}), <!-- 解析JSON字符串为JS对象 -->
    xkey: 'version',
    ykeys: ['success'],
    labels: ['Success']
  });
</script>

或者也可以用三重花括号直接输出，连JSON.parse都省了：data: {{{graph}}}，因为JSON字符串本身就是合法的JS对象表示。

方法3：通过HTML data属性传递数据 #

这种方法更适合复杂场景，或者需要在多个脚本里复用数据的情况：

1. 在模板里加一个隐藏元素，把数据存在data-*属性里：

<!-- 隐藏元素用来存数据 -->
<div id="graph-data" style="display: none" data-graph='{{{graph}}}'></div>

2. 在脚本里读取这个属性并解析：

<script>
  // 读取data属性里的JSON数据
  const graphData = JSON.parse(document.getElementById('graph-data').dataset.graph);
  
  new Morris.Line({
    element: 'myfirstchart',
    parseTime: false,
    data: graphData,
    xkey: 'version',
    ykeys: ['success'],
    labels: ['Success']
  });
</script>

这里用单引号包裹data-graph的值，是为了避免和JSON里的双引号冲突。

内容的提问来源于stack exchange，提问作者Ben Mustapha Sabrine