如何在EJS的script标签中正确使用Express传入的数据库查询对象

问题原因 #

你遇到的报错本质是服务端传给EJS的对象，在嵌入前端script标签时被错误转成了普通字符串，没有保留原始的数组/对象结构：

1. 使用<%= obj %>输出时，EJS会自动对内容做HTML转义，同时自动调用对象的toString()方法，最终你拿到的是[object Object],[object Object]...这样的拼接字符串，字符串本身没有forEach方法，所以报第一个类型错误。
2. 直接对这个拼接字符串做JSON.parse自然会失败，因为它根本不是合法的JSON格式。
3. 你之前使用JSON.stringify未生效，大概率是依然使用了<%= %>标签或者手动给赋值内容加了单/双引号，导致序列化后的JSON被转义或者被包裹成了普通字符串。

解决方法 #

直接使用EJS的非转义输出标签<%- %>配合JSON.stringify处理对象即可，正确写法如下：

<script>
// 注意不要手动给赋值语句加引号，使用<%- 而非<%=
var data = <%- JSON.stringify(obj) %>;

// 此时data就是原生JS数组，可以正常调用forEach
data.forEach(function(o) {
  console.log(o);
});
</script>

原理解释 #

• JSON.stringify(obj)会将服务端传入的数组/对象序列化为符合JS语法的对象字面量字符串
• <%- %>会直接输出原始内容，不会做HTML转义，也不会额外给内容套引号或调用toString()
• 最终前端拿到的data就是和服务端obj结构完全一致的原生JS数组，不需要额外做解析操作

如果你的数据中存在用户提交的富文本等可能触发XSS风险的内容，可以在服务端序列化前先对字段内容做HTML转义处理即可。

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