Trying to access ejs array in a js file

Question

I send info to the client that contains an array and I only show 3 elements of the array because I want to have a pagination effect. I wanted to write the pagination code in a js file

in file.js

$(function(){
    $(".pageLinks a").on("click", function(e){
        e.preventDefault();
        var pageNum = $(this).attr("id")
        var test = JSON.stringify(populated) // I wanted populated to be the array from node
                       //doesn't have to have the stringify part
                       // I know I can't do this prob bec. it's not in an ejs file but I wanted something like that
        console.log(test)

    })
})

I'm able to access it in the ejs file

          <% var index = Math.floor( populated.reviews.length /3)%>
            <div class = "pageLinks">
                <%for(var i = 0; i < index; i++){%>
                    <a href= "<%=i + 1%>" id = "<%=i%>"><%= i + 1 %> </a>
                <%}%>
            </div>
        </div> <!--reviewSide-->

Graham Shroll · Accepted Answer · 2016-11-05 10:57:13Z

3

You're right, you can't get to the raw object in the (static) js file in the same way.

However, you can populate it to a global variable in your ejs file like this:

<script type="text/javascript">
    var populated = <%-JSON.stringify(populated)%>;
</script>

which you can then either check for in the click handler like this:

$(function(){
$(".pageLinks a").on("click", function(e){
    e.preventDefault();
    var pageNum = $(this).attr("id")
    if (typeof(populated) != "undefined"){  
        // you want to check to make sure this exists before trying to use
        // it, just in case someone manages to click a page link before the
        // code in your .ejs file has run. 
        var test = JSON.stringify(populated) 
        console.log(test)
    }
})
})

...or pass to the external file.js when you load, as long as you're exposing something to the global scope that it can call. Your current script wraps everything in an anonymous function, but you could wrap it in a named function like this:

.ejs file:

<script type="text/javascript">
    initialiseMyAwesomeFunction( <%-JSON.stringify(populated)%> );
</script>

.js file:

function initialiseMyAwesomeFunction(populated){
     $(function(){
         $(".pageLinks a").on("click", function(e){
            e.preventDefault();
            var pageNum = $(this).attr("id")

            var test = JSON.stringify(populated) 
            console.log(test)
         })
     })
}

edited Nov 5, 2016 at 10:57

answered Nov 4, 2016 at 15:10

Graham Shroll

2911 silver badge6 bronze badges

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

2 Comments

jack blank Over a year ago

Do you mean that I can put the var populated part from your code in a script tag in an ejs file and I would be able to get access to that populated variable in a js file? just like that? and I could do the click handling based off the data in the populated variable which is an array in the js file.

Graham Shroll Over a year ago

Have edited to hopefully clarify :) You can only put <%=nodeVariable%> stuff into the .ejs file, so you need to do that part in the .ejs, but you can pass that to static .js files assuming there's something in the global scope you can call, or if you set something in the global scope that its looking for.

Collectives™ on Stack Overflow

Trying to access ejs array in a js file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related