Howto pass array values via from ejs to Javascript?

Question

I am passing an array via ejs with JavaScript. I can get to the values inside ejs but not from JavaScript. Below is more information.

node.js

FileTypes = {"application/octet-stream":20,
                 "audio/mpeg":12,
                 "text/html" :71}
res.render('index.ejs', {FileTypes: JSON.stringify(FileTypes)});

index.ejs

 <script type="text/javascript">

   var FileTypes =  <%=FileTypes%>;
   //Error message on the console - Uncaught SyntaxError: Unexpected token & 

 </script>

Any ideas?

What is populating <%=FileTypes%>? A templating system? A delimited value like this is not part of standard JavaScript. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Feb 18, 2014 at 15:39
@Diodeus OP said in the title, body, and tags: EJS. github.com/visionmedia/ejs — Jordan Running
– Jordan Running, Commented Feb 18, 2014 at 15:43
If that's the case, this injection method is designed to work with HTML, not with injecting code into SCRIPT blocks. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Feb 18, 2014 at 15:53

Jordan Running · Accepted Answer · 2014-02-18 15:55:40Z

5

Using the <%= %> tag in EJS will escape the output, so {"application/octet-stream": ... } is being turned into {"application/octet-stream": ... }, resulting in JavaScript like this:

<script type="text/javascript">                                                                                                                                          
  var FileTypes = {&quot;application/octet-stream&quot;:20,&quot;audio/mpeg&quot;:12,&quot;text/html&quot;:71};
</script>

So, you can see where the "Unexpected token &" is coming from. The solution is to use the <%- %> tag, which won't escape the output:

<script type="text/javascript">
  var FileTypes = <%- FileTypes %>;
  //      here -----^
</script>

...and will give you what you want:

<script type="text/javascript">                                                                                                                                          
  var FileTypes = {"application/octet-stream":20,"audio/mpeg":12,"text/html":71};
</script>

answered Feb 18, 2014 at 15:55

Jordan Running

107k18 gold badges193 silver badges189 bronze badges

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

1 Comment

Diodeus - James MacFarlane Over a year ago

Yup, that's what I assumed. The value of FileType should be available directly though without templating it. EXT is JS and that is just a variable.

Collectives™ on Stack Overflow

Howto pass array values via from ejs to Javascript?

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