How to render ejs from jQuery?

Question

I want to render a file after getting the data from the API.

code

$(document).ready(function() {
   $(document).delegate( "#editUser", "click", function() {
        var userId = $(this).data('id');
        $.post("/userProfile",{"userId":userId},function(data, status){
        console.log(data); //gets data here
        //how to render ejs file here with the above data? 
    });

});

ejs file: (sample.ejs)

<% include header.html %>
 <strong>Sample ejs</strong>
<ul>
 <li><%= data.name %> says: <%= data.message %></li>
</ul>
 <% include footer.html %>

How can I solve this problem?

Answer 1

$(document).ready(function() {
   $(document).delegate( "#editUser", "click", function() {
        var userId = $(this).data('id');
        $.post("/userProfile",{"userId":userId},function(html, status){
        $("#some-container").append(html);
    });
});

The above code assumes you're rendering ejs template from server side like so:

res.render('sample', {param1: param1 ...});

Answer 2

You can't render the ejs file with the data what you receive with ajax call. ejs renders at server side, where as the ajax call happens on the client side. To solve your issue you need to get the user data at server side it self and send it to ejs file.