How do I extract documents from a mongoDB collection using ejs such that each appears once on browser?

Question

I want someone to, please, help me to get over this hurdle. I'm trying to extract some documents that have the same properties from mongoDB. I'm using ejs template and mongoose. Everything is working properly except that each of the documents appears more than once on the browser but I want each to appear once and in a sequential order. I have the following code: indexSchema:

const indexSchema = mongoose.Schema({
    title: String,
    subtitle: String,
    quote: String,
    image:  String,
    imageCaption: String,
    author: String,
    qualification: String,
    body: String,
    createdAt: {
        type: Date,
        default: Date.now
    }

});
const Index =  mongoose.model('Index', indexSchema)
module.exports = Index;

Index route:

app.get("/", async (req, res) => {
    await Index.find((err, index) => {
         if (err){
              console.log("Sorry, posts not found successfully");
              console.log(err);
          } else{
             
          console.log("Collections received successfully!")
          res.render("index", {index:index});

index.ejs:

<%- include ('partials/header') %>
    <div class="container">
      <% index.forEach(index => { %>
        <img src="<%= index.image %>" class="img-fluid mt-0.5" alt="Responsive image">
        <div class="jumbotron jumbotron-fluid mt-1">
            <div class="container">
              <div class="row">
                <div>
                  <h3><%= index.title %></h3>
                  <h5><%= index.subtitle %>.</h5><i><%= index.quote %></i>
                </div>
              </div>
            </div>
        </div>
      
        <h3 class="mb-4">Featured Posts</h3>
        <a href="posts/" class="btn btn-outline-success">View All Posts</a>
         <div class="card mt-4">
              <div class="card-body">
                  <h4 class="card-title"><%= index.title %></h4>
                  <div class="card-subtitle text-muted mb-2">
                      <%= index.createdAt.toLocaleDateString(); %>
                  </div>
                  <div class="card-text mb-4">
                      <%= index.body %>
                  </div> 
                  <div>
                    <a href="/posts/<%= index._id %>" class="btn btn-outline-primary">Read more<i class="fas fa-angle-double-right"></i></a>
                  </div>
              </div>
            </div>
    <% }) %>
</div>
<%- include ('partials/footer') %>

From the index route, it's clear that I'm using the find() function. I know that this function brings back all the documents in the collection. Since each document has a title, subtitle, author etc, it's difficult for me to make sure that each appears once on the browser using forEach loop. The only means I know that would have rectified the issue for me is by targeting the id since each document has a unique id. But it seems I'm messing up everything because I do not know how to get this work in my HTML template since findById() appears to be incompatible with forEach(). Removing forEach() from ejs also prevents all the images in the database from appearing on the browser.

Answer 1

I found that by using mongoose nexted schema I was able to achieve the same result I wanted. Though this is definitely not the best approach, I was able to use it to move to the next level until I gain more experience with mongoose and ejs