CODEWITHSUNDEEP
node.jsmongodbpug
user3294779
user3294779

Reputation: 623

How to render 3 most recent Mongo items using Jade

I'm building an app with node, mongo, and jade, that allows me to add items to a database, and then have those items rendered on a page using jade. This is a content site, so I only want the three most recent database items to be rendered on the page. When I use a for loop in jade, it runs through the entire database and creates a new DOM element for each item in the db. This is the code I'm currently using:

for item in docs
            div(class='item')
                div(class='overlayHover')
                div(class='protectLink')
                    a(class='readMore' href='#') READ MORE
                    div(class='overlayText')
                        h3 #{item.description}
                img(class='triImage' src='http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg')
            div(class='item')
                div(class='overlayHover')
                div(class='protectLink')
                    a(class='readMore' href='#') READ MORE
                    div(class='overlayText')
                        h3 #{item.description}
                img(class='triImage' src='http://media-cache-ak0.pinimg.com/236x/6e/f1/82/6ef182a1085c987bf8143d9b2d4ea42b.jpg')
            div(class='item')
                div(class='overlayHover')
                div(class='protectLink')
                    a(class='readMore' href='#') READ MORE
                    div(class='overlayText')
                        h3 #{item.description}
                img(class='triImage' src='http://cdn.shopify.com/s/files/1/0257/8507/products/warren-keelan-surf-photo13sq_medium.jpg?v=1395110040')

I don't think the for loop is what I'm looking for. I would like for these three elements to be fixed, the only thing that changes is their item.description.

Is there a specific jade method I should be looking at in order to pull only the three most recent items from my mongo database?

Please let me know. Thanks.

Upvotes: 1

Views: 160

Answers (1)

ztirom
ztirom

Reputation: 4438

Like Amberlamps mentioned it would be better to only pass the 3 recent objects to your template, but your for each loop will suddenly post 9 times then, it should look more like:

for item in docs
  div(class='item')
    div(class='overlayHover')
    div(class='protectLink')
      a(class='readMore' href='#') READ MORE
      div(class='overlayText')
        h3 #{item.description}
  img(class='triImage' src='http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg')

But if you still want to handle your problem in Jade, here a quick demo, with an example that would work right now for you: 

- for(var i = docs.length-1; i >= docs.length-3; i--)
  div(class='item')
    div(class='overlayHover')
    div(class='protectLink')
      a(class='readMore' href='#') READ MORE
      div(class='overlayText')
        h3 #{docs[i].description}
    img(class='triImage' src='http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg')

I just added a new for loop. This will do nothing else as start with the last item in your passed element and post your data backwards.

Here my example data:

{
  docs: [
    {description: '1 Demo'},
    {description: '2 Demo'},
    {description: '3 Demo'},
    {description: '4 Demo'},
    {description: '5 Demo'}
  ]
}

And here the final result:

<div class="item">
  <div class="overlayHover"></div>
  <div class="protectLink"><a href="#" class="readMore">READ MORE</a>
    <div class="overlayText">
      <h3>5 Demo</h3>
    </div>
  </div><img src="http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg" class="triImage"/>
</div>
<div class="item">
  <div class="overlayHover"></div>
  <div class="protectLink"><a href="#" class="readMore">READ MORE</a>
    <div class="overlayText">
      <h3>4 Demo</h3>
    </div>
  </div><img src="http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg" class="triImage"/>
</div>
<div class="item">
  <div class="overlayHover"></div>
  <div class="protectLink"><a href="#" class="readMore">READ MORE</a>
    <div class="overlayText">
      <h3>3 Demo</h3>
    </div>
  </div><img src="http://cdn.modernfarmer.com/wp-content/uploads/2014/01/ChiangMai10.jpg" class="triImage"/>
</div>

Upvotes: 0

Related Questions