在 EJS 文件脚本标签中访问 Json 数组

Question

我想访问 EJS 文件的脚本标记内的 JSON 数组。 我在渲染它时将 JSON 数组从我的 index.js 文件传递​​到 EJS 文件。代码是：

sampleJArr=["data1","data2","data3"];
app.get('/test', function(req,res){
res.render('testfile',{
 'mJsonArr': sampleJArr
});

在EJS文件（testfile.ejs）中，code-：

<div>
  <!--Printing the JSON array. It prints  -->
  <p>JSON.stringify(mJsonArr)</p>
  <button onClick="myFunc">Take test</button>
</div>
<script>
  function myFunc(){
    var JsonData= <%= mJsonArr[0] %>
    console.log(JsonData)
  }
</script>

错误：-Uncaught ReferenceError: myFunc is not defined 在 HTMLButtonElement.onclick

但是当我尝试在 myFunc 中执行控制台（“某些字符串”）时，它不会给出该错误。只有当我在脚本标签内访问 mJsonArr 时，我才会收到 UncaughtRefrence 错误。如何访问我的脚本标签中传递的 mJsonArr ？请贡献。谢谢。

Answer 1

你不能在你的 script 标签中访问 mJsonArr[0] 的原因是因为 EJS 只是将 <%= mJsonArr[0] %> 替换为 data1 这意味着你生成的 html 会像

<div>
  <!--Printing the JSON array. It prints  -->
  <p>JSON.stringify(mJsonArr)</p>
  <button onClick="myFunc">Take test</button>
</div>
<script>
  function myFunc(){
    var JsonData= data1
    console.log(JsonData)
  }
</script>

其中有2个点是错误的

1. onClick="myFunc"

这需要更改为 onClick="myFunc()"。否则它永远不会调用。

1. var JsonData=data1

这不是将 字符串值 'data1' 分配给变量。它将一个名为“data1”的变量赋值给变量JsonData。

正确的做法应该是

<div>
  <!--Printing the JSON array. It prints  -->
  <p>JSON.stringify(mJsonArr)</p>
  <button onClick="myFunc()">Take test</button>
</div>
<script>
  function myFunc(){
    var JsonData= '<%= mJsonArr[0] %>'
    console.log(JsonData)
  }
</script>

希望对你有帮助