如何在EJS文件的script标签中访问传入的JSON数组？

你遇到的问题核心是后端传入的EJS变量没有正确转换成前端JavaScript可访问的对象，同时可能因作用域问题导致函数调用异常。下面分步骤帮你解决：

1. 确认后端变量传递正确 #

首先检查你的index.js是否正确将数组传递给EJS模板，代码应该类似这样：

// index.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  // 示例数组，替换成你的实际数据
  const targetArray = [{id: 1, content: "测试数据"}, {id: 2, content: "更多数据"}];
  // 关键：将数组以mJsonArr为键传递给EJS
  res.render('你的模板文件名', { mJsonArr: targetArray });
});

app.listen(3000);

2. 在EJS中正确引入数组到前端JS #

EJS的变量是服务器端渲染的，不能直接在前端script里使用mJsonArr，需要用EJS语法把它转换成前端可解析的JSON格式。注意必须用<%- %>而非<%= %>——后者会转义引号，导致JSON格式损坏：

<!-- 你的EJS文件 -->
<button onclick="myFunc()">点击测试</button>

<script>
// 第一步：把EJS变量转成前端JS可识别的对象
const mJsonArr = <%- JSON.stringify(mJsonArr) %>;

// 第二步：定义全局作用域的函数，现在可以正常访问数组了
function myFunc() {
  console.log(mJsonArr);
  // 这里可以执行任何数组操作，比如遍历、取值
  mJsonArr.forEach(item => console.log(item.content));
}
</script>

3. 排查「myFunc未定义」的额外情况 #

如果还是出现Uncaught ReferenceError: myFunc is not defined，大概率是函数作用域问题：

• 若你的script代码被包裹在局部作用域（比如document.addEventListener('DOMContentLoaded', function(){...})），onclick事件找不到全局的myFunc。这种情况建议改用事件监听绑定：

  <button id="testBtn">点击测试</button>
  
  <script>
  const mJsonArr = <%- JSON.stringify(mJsonArr) %>;
  
  // 通过DOM事件监听绑定，避免全局作用域问题
  document.getElementById('testBtn').addEventListener('click', function() {
    console.log(mJsonArr);
  });
  </script>
  

• 另外检查数组是否存在循环引用：如果数组里的对象有循环引用，JSON.stringify会报错，需要先清理数据中的循环引用再传递。

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