无法访问 Javascript 脚本标签内 EJS 中声明的 json 数组的项目答案

【问题标题】：Cannot access the items of the json array declared in EJS inside Javascript script tags无法访问 Javascript 脚本标签内 EJS 中声明的 json 数组的项目
【发布时间】：2018-07-15 13:06:11
【问题描述】：

<div>  
    var arrayContent='<%= myJsonArray %>'
 <!--myJsonArray is sent to this ejs file using the render function in
 index.js while rendering this ejs file -->
</div>
<script>
  var index=0;
  function myfunc(){
  console.log(arrayContent); /*[object Object],[object Object],[object 
                                Object],[object Object] */

  var arrContentJson= JSON.parse(arrayContent);
  console.log(arrContentJson[index]); /* Uncaught SyntaxError: Unexpected 
                                         token o in JSON at position 1 */
   }
     </script>

为什么我无法访问解析后的 Json 数组 (arrContentJson) 的内容。如何访问它？

【问题讨论】：

myJsonArray 可能是一个数组，而不是代表数组的 JSON。（这里还有<div> 标签而不是<script>。）但是，将任意JSON 直接放在<script> 标签中是不安全的；您需要使用专门为此目的设计的转义。（如果你实现了它，你应该通过确保 < 被转义为 \x3c 来测试它是否正常工作。）
最好将调试点放在 var arrayContent='' 并观察变量内容。
我认为您提供的console.log 日志不正确。最初 arrayContent 是一个字符串。它看起来怎样？你得到的错误应该发生在JSON.parse()
看来不用打JSON.parse()了。如果您通过 EJS 模板传递 JSON，它应该作为对象文字而不是字符串加载到该脚本中。只需删除 <%= myJsonArray %> 周围的引号
让我困惑的是为什么你在 <div> 中包含 JavaScript。

标签： javascript json node.js express ejs

【解决方案1】：

看起来您想将一个数组从 ejs 传递给 <script> 标记内的 javascript 代码，为此您应该使用未转义的插值 <%- %>：

<script>

    var arrayContent= <%- JSON.stringify(myJsonArray) %>;

    var index=0;

    function myfunc(){
        console.log(arrayContent);

        var arrContentJson= JSON.parse(arrayContent);
        console.log(arrContentJson[index]);
    }

    myfunc();

</script>

【讨论】：

不，它不起作用。它没有给出任何具体的错误。只是说：myfunc 没有定义。
myJsonArray 是 json 字符串还是 javascript 对象？
这是一个 JSON 数组。
尝试改用var arrayContent= <%- JSON.stringify(myJsonArray) %>;
好的，这行得通，我可以从 arrayContent 中取出元素。但我有一个疑问。我所知道的是，要访问 JSON 数组的元素，它应该是一个纯 Json 数组而不是它的字符串化版本，对吧？但在我的情况下，当我尝试将作为 JSON 数组的字符串化版本的 arrayContent 解析回 JSON 并访问数组元素（如 arrayContent[0].col[0]）时，我收到错误“JSON 中的意外令牌 o位置 1" 但是当我从字符串化版本访问元素时，即直接从 arrayContent 而不将其解析为 JSON，它可以工作！怎么样？

【解决方案2】：

可能删除 '<%= myJsonArray %>' 周围的单引号会起作用，但看起来您正在解析已经有效的 json。 console.log(arrayContent[0]) 代替。

【讨论】：

不，它不起作用。它给了我一个错误 Uncaught ReferenceError: myfunc() is not defined。它没有给出任何具体的内容。这就是为什么我尝试将 myJsonArray 作为字符串访问，以便我可以将其控制出来，然后将其解析回 JSON 以访问内容。查看我评论过的控制台日志。谢谢
[object Object],[object Object],... 意味着两件事之一：它已经正确解析了 json，这意味着您不需要 JSON.parse() 它，或者就是myJsonArray 变量的文字字符串内容。我怀疑'myFunc（）'是未定义的，因为没有单引号的json后面缺少分号，但这引出了一个问题，为什么你要在div内的脚本元素之外声明json。这在开发工具中很容易调试，console.log 中的输出是字符串还是对象？
我知道它是 json 解析的，但我已将其转换为字符串，以便可以在控制台中将其注销。之后，我将其解析回 Json，以便我可以访问内容，但我得到 Uncaught SyntaxError: Unexpected token o in JSON at position 1. 我的实际 Json 内容是：['col1':['data1', 'data2' ], 'col2':[ 'data1', 'data2' ], 'col3':[ 'data1', 'data2' ], 'col4':[ 'data1', 'data2' ] ]
您可以将对象记录到控制台，它们不必是字符串。
"Unexpected token o in JSON at position 1" 表示它正在尝试将字符串 '[object Object...' 解析为 json，这意味着 '<%= myJsonArray %>' 是一个包含文本 '[对象对象...'。删除引号，添加分号，不要 JSON.parse() 它。届时您将能够访问 arrayContent[0]。