Dribbling with Filter.js: client-side JS filtering of JSON objects


Dribbling Filter.js

Play framework with client-side JS filtering of JSON objects and rendering HTML snippets via jQuery.

Big chunk to display? Interactive filtering? Most importantly it has to be really fast. Isn’t it like dribbling against Netherland! Big ground, lots of hooting and most importantly have to be fast and win
 
UI programming is an exciting ground to play, That’s why i chose reactive platform play framework. But problem was how to dribble at client side. Need an api to provide fast filtering of data. Answer is Filter.js

In this post we are integrating Filter.js with Play Framework for reactive data streaming using Ajax and filtering data on client side using Filter.js magic.

Filter.js is client-side JSON objects filter to show/hide HTML elements. Multiple filter criteria can be specified and used in conjunction with each other.

Mustache.js is a logic-less template syntax. It can be used for HTML, config files, source code – anything. It works by expanding tags in a template using values provided in a hash or object.


Instructions :-


  • The Github code for the project is at : playing-json-object-filter-js
  • Clone the project into local system
  • To run the Play framework 2.3.3, you need JDK 6 or later
  • Install Typesafe Activator if you do not have it already. You can get it from here: download
  • Execute activator clean compile to build the product
  • Execute activator run to execute the product
  • playing-json-object-filter-js should now be accessible at localhost:9000

References :-


This is the start, from next week onwards we would be working on this application to make it grow. We would look at how we can make it more functional, then we would be adding more modules to it together. If you have any changes then feel free to send in pull requests and we would do the merges 🙂 Stay tuned.

Advertisements

About Anand Kumar Singh

Hi, I’m Anand Singh and I specialize in Computer Software. I’m passionate about what I do, and I love to help people. Nothing is more fulfilling than being part of a team with similar interests, and an organization that values its employees. I'm Lead Software Engineer at Sapient. Having 5+ years of experience in Java, Grails/Groovy and Scala language. Anand also knows about Javascript, jQuery, CSS and other UI design technologies. Certified developer in: * Principles of Reactive Programming – Coursera * Functional Programming Principles in Scala – Coursera * Functional Program Design in Scala – Coursera * Introduction to Big Data with Apache Spark – edX * Oracle Certified Associate (OCA) * Sun Certified Java Programmer (SCJP) I'm passionate to work with upcoming technologies and bleeding platforms providing the new way to programming & development. He is actively involved in development & maintenance of several software projects. He has been enjoying Scala for more than a year now. Anand completed his MCA from IGNOU. As a Developer, I'm continuing my journey by actively collaborating with other Developers in my field. I'm actively contributing on the TechMonad & Playing Scala platform. I likes to spend his free time in Cooking, watching Discovery for new Technology and visiting new places with friends.
This entry was posted in AJAX, Bootstrap, JavaScript, jQuery, Play Framework, Reactive, Scala, Web and tagged , , , , , , , , . Bookmark the permalink.

2 Responses to Dribbling with Filter.js: client-side JS filtering of JSON objects

  1. Google says:

    We stumbled over here by a different web page and thought I might check things out.
    I like what I see so now i’m following you.
    Look forward to looking into your web page for a second time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s