When I pass a variable to my html page with NodeJS I can access it with an inline script as follows:
// passing myVar from the server
router.get('/', (req, res) => {
res.render('index', { myVar: 'test'});
});
// access in index.ejs
<script>
let myVar = <%- JSON.stringify(myVar) %>;
alert(myVar);
</script>
If I try to use an external script here instead of the inline I encounter an error over using the ejs syntax <%- %>. How can I access myVar in an external script?
Code between <%- and %> is server side code.
If you move it out of your EJS template file and into a static JS file, then you can't get at the data. It won't be replaced and you'll send the EJS template to the browser instead of processing it on the server to generate a document.
If you move it out of the EJS template file that generates HTML and into a different EJS template file that generates JavaScript then it will work as normal (except that it will have a different URL with a different end point in your server side code, so you will need to move the server side code which populates the variables you are trying to access).
You have two reasonable options:
One to get the data for the page:
<script>let myVar = <%- JSON.stringify(myVar) %>;</script>
And one to contain the JavaScript logic:
<script src="/js/logic.js"></script>
<div data-myVar="<%- JSON.stringify(myVar).replace(/"/g, """); %>">...</div>
… and then access it through the DOM.
you can put your variable in data-value for get with js or jquery in script e.g :
view ejs side :
<div class='test' data-test-value='<%= JSON.stringify(myVar) %'></div>
js script side :
-if you use jquery:
var $test = $('.test').attr('data-test-value')
alert($test);
-if you use vanillaJs :
var test = document.getElementsByClassName('test');
var testValue = test[0].dataset.testValue;
alert(testValue)
I dont test my vanilla script refer to doc if im wrong on syntax
Here's another pattern using a query string on the script tag src string:
<script src="index.js?ip=<%= client_ip %>">
...then in index.js:
const urlObj = new URL(document.currentScript.src)
const ipAddr = urlObj.searchParams.get('ip')
) document.currentScript.src - the src string (var was filled in when page served)
) new URL() - makes a URL object from src string
) .searchParams.get('ip') - extracts the query string param we want from the object
Appeals to my aesthetic since it's kinda self-contained.
