Sharing data between ejs and javascript files

Question

Sharing data between ejs and javascript files

When using Express, I have encountered an issue with passing a variable to an EJS file called "index.ejs".

res.render("index",{passedUser:req.user.alias})

Although I am able to successfully print it using <%=passedUser%> in the EJS file, I require this variable in a JavaScript file for certain operations. For example, in the "index.ejs" file, if I include:

<script>

const a = <%=passedUser%>;
console.log(a);

</script>

Unfortunately, this approach does not work as expected. Can someone offer guidance on how to resolve this issue?

javascript express web ejs

Answer 1

Answer №1

One possible solution is illustrated below:

<div id="mydiv" data-user=<%= passedUser %>></div>

Subsequently, in your <script>, you can retrieve the value from the designated div where your information is stored:

<script>
  var test = document.getElementById('mydiv').dataset.user
</script>

It's a similar concept. Wishing you success.

Answer 2

One possible solution is illustrated below:

<div id="mydiv" data-user=<%= passedUser %>></div>

Subsequently, in your <script>, you can retrieve the value from the designated div where your information is stored:

<script>
  var test = document.getElementById('mydiv').dataset.user
</script>

It's a similar concept. Wishing you success.

Sharing data between ejs and javascript files

Answer №1

Similar questions

Implementing a gradient effect on a specific image element within an HTML canvas with the help of jQuery

Exploring the distinctions between Node Express Router's /users/:id and /users/login routes

An issue arises when trying to upload a file using axios; the req.body and req.file objects are

Unable to manipulate JQuery lightSlider slides using element index

HTML5 Video Frozen in Place on Screen's Edge

personalizing material-ui component styles – set select component color to be pure white

The jQuery countdown plugin is yielding some unexpected outcomes

Using an AngularJS directive to modify CSS styles

Ways to identify the visible elements on a webpage using JavaScript

Is there a way to access the original query string without it being automatically altered by the browser?

Checking the content of a textfield in React Material UI based on the user input

The issue of Angular 6 view failing to display accurate data upon page load

Retrieve the value of [routerLinkActive] in the component's class

Is there a way to incorporate a fade-in effect when I trigger the expand function in this script?

Add an element to the input field

Using jQuery to scroll within a table

Expanding Lists in Bootstrap 3: A Step-by-Step Guide

After switching from jQuery to pure JavaScript, the code is now up and

Monitoring changes in an array of objects using AngularJS's $watch function

Achieve identical outcomes with PHP's `strlen` function and jQuery's `val().length` method