send data from server to client nodejs

Question

I have this code that allows me to get all the posts that the user made in my DB. The problem is that I tried to send that data to the front end (client). But I didn't succeed and I don't know what I'm missing,

The code that extracts the user's info from mongoDB is below. Tthe code is working perfectly, no issue with it,

User.find({}).lean(true).exec((err, users) => {
      let userMap = [];

            userMap.push({ user: users[i], posts: users[i].posts[j] });
       //all the data are stored to userMAP :[{user : xxxxx ,posts : {the posts are here}}]
          }
        }

      }
      console.log(userMap);

      User.findOne({ userName: req.user.userName }, (error, req_user) => {

        console.log(req.user.lastLogin)
        let lastSeen = ta.ago(req.user.lastLogin);

        //console.log(posts)
        res.render('home', { // this part for rendering the homePage and send data
          user: req_user,
          people: users,
          userMap: userMap.reverse()
        });
      });

What I tried in my client side code is this:

  <div class="container">

        <% for(var x=0;x<user.posts.length;x++) { %>
    <div class="jumbotron">
        <div>by
            <b>{{ user.posts[x].author }}</b>
            on
            <small>{{ user.posts[x].createdAt }}</small>
        </div>

        <div>
            <p>{{ user.posts[x].caption }}</p>
        </div>

        <div class="row">
            <button onclick="actOnPost(event);"
                    data-post-id="{{ this.id }}">Like
            </button>
            <span id="likes-count-{{ this.id }}">{{ this.likes_count }}</span>
        </div>
    </div>
    <% } %>

For the error part I don't get anything,

this is the image of my stored data in the database

and this is the image of the homepage

The scenario for my code:

1- I'm using a EJS view engine and when the user login in the home.ejs is showing up and in the server side I use the code above to prepare the data that I need to display

2- Everything works perfectly except for displaying the data on the client side home.ejs

3- to call that page from my server I used this statement with the mix of the above code

router.get('/home', (req, res) => {
  if (req.user.id) {
    console.log(req.user.id)
    User.find({}).lean(true).exec((err, users) => {
      let userMap = [];

Any help or a better solution for showing data at the client side,

Best Regards,

Answer 1

That's not the syntax to display data in ejs,try this.See these docs

<%= Outputs the value into the template (HTML escaped)

    <% for(var x=0;x<user.posts.length;x++) { %>
<div class="jumbotron">
    <div>by
        <b><%= user.posts[x].author %></b>
        on
        <small><%= user.posts[x].createdAt %></small>
    </div>

    <div>
        <p><%= user.posts[x].caption %></p>
    </div>

    <div class="row">
        <button onclick="actOnPost(event);"
                data-post-id="<%= this.id %>">Like
        </button>
        <span id="likes-count-<%= this.id %>"><%= this.likes_count %></span>
    </div>
</div>
<% } %>

Answer 2

The source code for the template is being rendered in the browser. This means that the view engine is not parsing it.

The default view engine is Jade, but you aren't using Jade.

Probably you forgot to configure the view engine :

app.set('view engine', 'whatever template engine you are trying to use')

Answer 3

Hi @odegeek what show us so far is how are you getting the data from the database and an idea of how to show it in your view. But we are missing a few pieces of information here. For example:

• Which frontend framework are you using if any?
• Where are you calling the backend endpoint?
• Which view engine are you using?

A typical flow for this scenario would be:

• You frontend makes a request to your backend asking for the data
• Once the response gets to the browser you do some kind of parsing/mapping to adapt it to your needs
• Then you pass it to your view for rendering. Now depending on the frontend framework/view engine you are using. The code to render the data will vary

I hope this can give you a idea of what you need to provide/do.. thanks