Two Harp.js Recipes: Limiting a list of blog entries by count and by date

This post is more than 2 years old.

Here are two simple recipes for a Harp.js blog. Both are built using EJS but could be ported to Jade pretty easily. As I hate Jade I will not be the person doing it. ;) First, let's look at the sample data - a set of blog entries defined in _data.json.

	"aaa": {
		"title":"All about AAA",
		"published":"February 13, 2014"
	"bbb": {
		"title":"Something else",
		"published":"February 12, 2014"
	"bbb2": {
		"title":"Something else 2",
		"published":"February 10, 2014"
	"bbb3": {
		"title":"Something else 3",
		"published":"January 12, 2014"
	"bbb4": {
		"title":"Something else 4",
		"published":"January 11, 2014"
	"bbb5": {
		"title":"Something else 5",
		"published":"January 11, 2014"
	"bbb6": {
		"title":"Something else 6",
		"published":"January 10, 2014"
	"bbb7": {
		"title":"Something else 7",
		"published":"January 9, 2014"
	"bbb8": {
		"title":"Something else 8",
		"published":"January 8, 2014"
	"bbb9": {
		"title":"Something else 9",
		"published":"January 7, 2014"
	"bbb10": {
		"title":"Something else 10",
		"published":"January 6, 2014"
	"bbb11": {
		"title":"Something else 11",
		"published":"January 4, 2014"

So yeah, not the most imaginative titles, but you get the idea. So first, let's look at just printing everything:


<% for(article in public.articles._data) { %>
	<li><a href="/articles/<%- article %>.html"><%- public.articles._data[article].title %></a></li>
<% } %>

Which gives us:

Now let's consider an example that limits the display to 10 entries. All I did was switch to a for loop that iterates from 1 to 10 (or the number of entries if it is less than 10):

<h2>Last 10</h2>

	var keys = Object.keys(public.articles._data);
	for(var i=0; i<Math.min(10,keys.length); i++) {
	<li><a href="/articles/<%- keys[i] %>.html"><%- public.articles._data[keys[i]].title %></a></li>
<% } %>

Which gives us:

I should note that I am not convinced this strategy will always work since I don't believe the order is guaranteed to be in a particular order. Also, it assumes you enter your posts in a particular order. Keep that in mind. Now let's look at how to filter by "current" posts. In this case, items in the last 7 days.

<h2>Last Week</h2>

	function daysDifferent(d1,d2) {
		var t2 = d2.getTime();
        var t1 = d1.getTime();

        return parseInt((t2-t1)/(24*3600*1000));

	var now = new Date();
	for(article in public.articles._data) {
		var articleOb = public.articles._data[article];
		var d = new Date(articleOb.published);
		if(daysDifferent(d, now) <= 7) {
	<li><a href="/articles/<%- article %>.html"><%- articleOb.title %></a></li>

All I've done here is use a simple function (stolen, I mean borrowed, from StackOverflow) to get the date difference between two dates. I compare when the blog entry was written to the current date and display it if the value is less than or equal to 7. And this returns:

Of course, this solution has an interesting side effect - it won't work if you output Harp to a static site. You could create a build process that runs this daily and saves the output to your server. I'd imagine that if you have even a semi-active blog (a few entries per week) then it would be less of an issue, especially if you don't say in the HTML what "Current" means. So for example, if my list in the screen shot above ends up getting a bit stale because I haven't blogged a bit, it is still not terribly old.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Emma posted on 3/21/2016 at 10:31 AM

Hi Raymond,
Love your blog and learned a lot about Harp and EJS, but working with a new team of people and they use Jade, is there an easy way of converting EJS to Jade or is it not possible? Sorry for the n00b question still new to all of this :)

Keep up the fantastic work!

Comment 2 (In reply to #1) by Raymond Camden posted on 3/21/2016 at 1:47 PM

That's not a bad question, but unfortunately, there is no easy way to convert. You can *absolutely* do it by hand, in other words, there isn't something special about EJS that you would not be able to do in Jade, but you won't be able to convert automagically.

Comment 3 by laurent posted on 8/29/2016 at 5:56 AM

@Emma this is it !

h2 Last 10
- var keys = Object.keys(public.articles._data);
- for(var i = 0; i < Math.min(10,keys.length); i++) {
li: a(href="/articles/#{ keys[i] }.html")= public.articles._data[keys[i]].title
- }

don't forget tabulation !

Raymond Camden Thanks a lot, you made my day