1

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

enter image description here

and this is the image of the homepage

enter image description here

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,

4
  • Can you provide a small repo where we can reproduce the issue? Commented May 2, 2020 at 14:21
  • I can provide you the file of my home.ejs is that ok for you? or do you need the whole project? Commented May 2, 2020 at 14:25
  • 1
    If you could prepare a small project maybe with just the files related to your issue I could take a look at it. It is hard for me to tell you what is wrong without having a better picture Commented May 2, 2020 at 14:30
  • @orlaqp I just accept the solution see below , Thank you for your time, Have a nice day Commented May 2, 2020 at 14:31

3 Answers 3

2

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>
<% } %>
Sign up to request clarification or add additional context in comments.

3 Comments

worked as a expected just one last question is it the same thing for .html part or this only work for ejs ?
No ,you can't use these tags for .html extensions @Nodegeek .Accept the answer if that worked
,could it be possible to give me a link for the html part also :-D ,sorry
0

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')

1 Comment

Hello, thank you for your answering ,No @Quentin I already used that in my app.js app.use(expressLayouts); app.set('view engine', 'ejs'); .....The page is generated well but the communication between data from server and client is not OK,,, mayble there is JS script that I need to add?
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.