CODEWITHSUNDEEP
javascriptnode.jsexpresshogan.js
Akhilesh Singh
Akhilesh Singh

Reputation: 1724

How to display the number of items inside for loop using hoganjs template

I have a object, I want to limit the number of Items displayed at the front end. The problem is that I'm using hogan js template for rendering my HTML. I didn't understand how to implement the logic in hogan js.

Routes Code Where I set the Object : 

res.render('search', {
          layout : 'layouts/main/default',
          partials:{
                   Header: "includes/main/header",
                   Slider: "includes/main/slider",
                   Contact: "includes/main/contact",
                   Footer: "includes/main/footer",
                   Search : "includes/main/search"
          },
          title   :  'Result',
          product :  data.product, //here I set the product Json data 
          total   :  totalProducts,
 })

Product JSON contains the data like this:

{ product: 
   [ { link: 'http://www.walmart.com/ip/Straight-Talk-Samsung-Prepaid-Galaxy-GRAND-Prime-LTE-S920C-Smartphone/46716301',
       image: 'http://i5.walmartimages.com/dfw/dce07b8c-39c4/k2-_b4b0e2b5-8534-4979-8953-aae10886c54c.v1.jpg',
       name: 'Straight Talk <mark>Samsung</mark> Galaxy GRAND Prime 4G LTE Android Prepaid Smartphone',
       price: '149',
       logo: '/images/wal.png',
       siteName: 'Walmart'
      },
      { link: 'http://www.walmart.com/ip/T-Mobile-Samsung-Galaxy-S4-Prepaid-Smartphone/43388843',
       image: 'http://i5.walmartimages.com/dfw/dce07b8c-d26b/k2-_8f1131b8-61d3-4760-8129-9a740eb10e9b.v1.jpg',
       name: 'T-Mobile <mark>Samsung</mark> Galaxy S4 Prepaid Smartphone',
       price: '149',
       logo: '/images/wal.png',
       siteName: 'Walmart' 
      },
      ......
      ......
     ]
}

Search.hjs contains the html code:

<div class="row">
     {{#product}}
     <div class="col-md-4 col-sm-6">
        <div class="center">
           <img src="{{image}}"  class="img-rounded" height="100" width="100"/>
           <h4>{{name}}</h4>
           <h4>{{price}}</h4>
           <a href="{{link}}"> <button type="button" class="btn btn-info">View Details</button></a>
        </div>
     </div>
     {{/product}}
</div>

I want to display only three products at a time.

Upvotes: 0

Views: 89

Answers (1)

robertklep
robertklep

Reputation: 203286

I didn't understand how to implement the logic in hogan js.

Hogan (and Mustache, on which it's based) is called a logic-less templating engine. It doesn't provide you with logic to perform these sorts of tasks from within the template.

I want to limit the number of Items displayed at the front end

You have to limit the array-size server-side:

product : data.product.slice(0, 3)

Upvotes: 1

Related Questions