Express - Use object received via the render function in an external JavaScript file

Question

I am passing an object from Express using the render function like so in my index.js file:

app.get("/chat", function(req, res){
  res.render("chat", {user: req.user});
});

I can use it in my chat.ejs file:

<% if(!user){ %>
  <li><a href="/auth/login">Connexion</a></li>
<% } else{ %>
  <li><a href="/profile">Profil</a></li>
  <li><a href="/chat">Chat</a></li>
  <li><a href="/auth/logout">Déconnexion</a></li>
<% } %>

<div id="output"></div>

A chat.js JavaScript file is linked to my chat.ejs file:

<script defer type="text/javascript" src="/script/chat.js"></script>

However my external JavaScript doesn't know the user object when I want to output data inside the div tag:

typingFeedback.innerHTML = "<img src=" + user.thumbnail + "alt='Profile Image />";
let newP = document.createElement("p");
let newTxt = document.createTextNode(data.message);
newP.appendChild(newTxt);
output.appendChild(newP);

Here is a picture of how my files are organize:

How can I use the user object in my external JavaScript ?

Jonas Wilms · Accepted Answer · 2019-03-03 13:31:24Z

1

In your chat.ejs you could expose the user as a JavaScript object:

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

then you can access it as user from your code.

edited Mar 3, 2019 at 13:31

answered Mar 3, 2019 at 9:40

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

2 Comments

titi157 Over a year ago

I added your piece of code in my "chat.ejs" file before the call of my "chat.js" script. Unfortunately, I still have the following error in my "chat.js" script : "Uncaught ReferenceError: user is not defined"

Jonas Wilms Over a year ago

@titi157 did you take over the exact code? does the ejs insertion work as expected? Any other errors?

Collectives™ on Stack Overflow

Express - Use object received via the render function 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