How to pass a 2d array from JavaScript to script tag in ejs?

Question

I am trying to pass a 2d array of false values from an index.js file of my project to a script section of an ejs file.

index.js

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

based on a few stack answers from others' related posts, I tried the following implementation in my ejs file:

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>

I thought I was close. I tried to pass in a 3x3 array and this is what I got:

instead of rendering a button for each value in the 2d array, it renders a button for each character in the string. What I am looking for is the ability to display buttons for each entry of the 2d array. More specifically, how do I allow the script tag of an ejs file to have access to the same variables that the rest of the file has access to?

data-arr= "<%=arr%>" and var arr = document.getElementById("script").dataset.arr; — Pranav C Balan
– Pranav C Balan, Commented Mar 19, 2019 at 18:32
Put the array directly into your script, rather than an attribute of an element. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Mar 19, 2019 at 18:34

Jonas Wilms · Accepted Answer · 2019-03-19 18:43:44Z

1

If you pass data from backend to frontend, you have to properly serialize it, usually as JSON:

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

But that is just ugly. Why not just directly generate the buttons with EJS?:

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

answered Mar 19, 2019 at 18:43

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vincent Lauffer Over a year ago

Your first solution definitely works! I am trying to make each button into its own custom query, and their place in the array determines what their query is. Thank you!!!!!

Collectives™ on Stack Overflow

How to pass a 2d array from JavaScript to script tag in ejs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related