JSON.parse无法解析对象数组字符串及Node.js传参至前端的疑问

在Node.js路由中把字符串化的对象数组传给EJS模板，尝试通过隐藏input在前端解析时失败：

路由代码：

let scriptArray = [
  {
    charValue: 'a',
    encodedValueMain: 'g',
  },
  {
    charValue: 'b',
    encodedValueMain: 'o',
  },
]

router.route('/playground')
.get((req, res) =>{
    res.render('playground', {value: JSON.stringify(scriptArray)})
})

EJS模板代码：

<input type="hidden" id="test" value="<%= value %>">

前端JS代码：

(function () {
    let temp = document.getElementById('test');
    let script = JSON.parse(temp);
    console.log(script)
})();

控制台报错：

VM600:1 Uncaught 
SyntaxError: Unexpected token 'o', "[object HTM"... is not valid JSON
    at JSON.parse (<anonymous>)
    at playground.js:5:19
    at playground.js:7:5
(anonymous) @   playground.js:5
(anonymous) @   playground.js:7

1. 修复当前隐藏input的解析问题 #

存在两个关键错误：

• 错误1：JSON.parse(temp)传入的是DOM元素对象，而非input的value值，需改为JSON.parse(temp.value)
• 错误2：EJS的<%= %>会转义HTML特殊字符，将JSON中的双引号转为"，破坏JSON格式。需改用<%- %>直接输出原始字符串，不做转义

修改后的EJS代码：

<input type="hidden" id="test" value="<%- value %>">

修改后的前端JS代码：

(function () {
    let temp = document.getElementById('test');
    let script = JSON.parse(temp.value);
    console.log(script)
})();

2. 无需隐藏input的更优方案 #

直接在EJS模板中将Node.js变量注入前端JS环境，省去隐藏input和JSON解析步骤：

路由代码修改（无需提前JSON.stringify） #

let scriptArray = [
  {
    charValue: 'a',
    encodedValueMain: 'g',
  },
  {
    charValue: 'b',
    encodedValueMain: 'o',
  },
]

router.route('/playground')
.get((req, res) =>{
    res.render('playground', {scriptArray}) // 直接传递原数组
})

EJS模板中注入变量 #

在EJS的<script>标签内用<%- %>输出字符串化后的数组：

<script>
// 前端直接拿到可用的对象数组
const scriptArray = <%- JSON.stringify(scriptArray) %>;
console.log(scriptArray);
</script>

前端可直接使用scriptArray变量，无需额外解析，代码更简洁高效。

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