Use a passed variable in an external Javascript file

Question

I'm passing two variables to my front end like this

res.render("mypage", {data: data});

Using the data within my variable, I want to build some HTML elements and do some data visualization using charts. I can of course just use my templating software (EJS) and write a whole lot of javascript within the HTML file itself, but that doesn't sound sensible.

I searched around stackoverflow and the general solution seems to be to put it into a global variable and then load in the external js file so it has access to it, so on my front end I would have this

    <head>
        <title>Cool Site</title>
        <script>
            var data = <%- data %>;
        </script>
        <script src="/fun.js"></script>
    </head>

The problem is that VSCode itself says Expression Expected for my <%- and %> parts, and when I try to access the variable within my fun.js file, it says Data is not defined and also says SyntaxError: Unexpected token.

Any ideas on how I can properly access the data?

Does <%- JSON.stringify(data) %> work? Otherwise, your script tag may contain something like var data = [Object object];. — Jacob
– Jacob, Commented Mar 30, 2020 at 21:42
Yes, I'm using EJS and loading small data (like name) in other areas on the page and it works fine. I imagine the problem is with me trying to set a variable equal to an EJS thing — WildWombat
– WildWombat, Commented Mar 30, 2020 at 21:43
You should share what your HTML looks like (view source), especially that script block. — Jacob
– Jacob, Commented Mar 30, 2020 at 21:44
@Jacob Well damn... It does work. I'm still getting an error on the editor I'm using but it seems to be working fine and I can access it from the back end. Any idea why it was throwing errors before? — WildWombat
– WildWombat, Commented Mar 30, 2020 at 21:45

Jacob · Accepted Answer · 2020-03-30 21:50:58Z

1

EJS is simply a templating language. It spits out text. It will interpret the following:

<script>
  var data = <%- data %>;
</script>

...sort of like:

`<script>
  var data = ${data};
</script>`

So what does <%- data %> mean? It means take the raw value of the expression and output it to the result. Since data is an Object, it's most likely calling toString on it, and .toString() for an Object by default is the string [Object object], making your JavaScript the following, which has a syntax error:

<script>
  var data = [Object object];
</script>

Your easiest workaround would be to serialize your data as JSON, which is intepretable within JavaScript as an object literal:

<script>
  var data = <%- JSON.stringify(data) %>;
</script>

...though you do have to be careful about edge conditions like where your data may contain a </script> string, in which case it'll prematurely close your script tag. Fortunately there are many packages out there for a safer version of JSON stringifying for output on an HTML page. Use a safer stringifying library if your data can contain arbitrary user strings; otherwise you've got a script injection vulnerability.

answered Mar 30, 2020 at 21:50

Jacob

79k24 gold badges159 silver badges245 bronze badges

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

2 Comments

WildWombat Over a year ago

Perfect, that makes a lot of sense. And thanks for pointing out the thing about script injection vulnerability. The data doesn't have any user inputted strings so I should be good on that front but I may use one just in case? Either way thanks! :)

Jacob Over a year ago

Yeah, doesn't hurt to use one anyway.

Collectives™ on Stack Overflow

Use a passed variable in an external Javascript 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