javascript - 如何将二维数组从 JavaScript 传递到 ejs 中的脚本标签？

Question

我正在尝试将一个二维假值数组从我的项目的 index.js 文件传递​​到 ejs 文件的脚本部分。

index.js

app.get('/nextpage',(req,res)=>{
    var arr = function I have to make a 2d array ;)
    res.render('pages/nextpage.ejs',{
        arr: arr
    });
});

根据其他人相关帖子中的一些堆栈答案，我在我的 ejs 文件中尝试了以下实现:

nextpage.ejs

<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>

    <div id = "script" arr= "<%=arr%>" ></div>
    <script>

        function renderBlock(){
             var arr = document.getElementById("script").getAttribute('arr');
             console.log(arr.length);
             $("#blockView").empty();
             for (var i=0; i <  arr.length;i++){
                for (var j=0; j <  arr[0].length;i++){
                    $('#blockView').append('<button>'+arr[i][j]+'</button');
                }
             }
         }
         renderBlock();

     </script>

我以为我已经很接近了。我尝试传入 3x3 数组，这就是我得到的:

它不是为二维数组中的每个值呈现一个按钮，而是为字符串中的每个字符呈现一个按钮。我正在寻找的是能够为二维数组的每个条目显示按钮。更具体地说，如何允许 ejs 文件的脚本标记访问文件其余部分可以访问的相同变量？

Answer 1

如果将数据从后端传递到前端，则必须对其进行正确序列化，通常为 JSON:

 "<%=JSON.stringify(arr)%>"
// ->
var arr = JSON.parse( document.getElementById("script").getAttribute('arr'));

但这太丑陋了。为什么不直接用 EJS 生成按钮呢？:

<% for(const sub of arr) { %>
  <% for(const el of sub) { %>
    <button> <%= el %> </button>
  <% } %>
<% } %>