Advanced Filters In JavaScript Apps — Part 1

o

Following my recent disclosure on Facebook (pic above) and the “little” interest it generated, here is an attempt to make a case for multi-query filtering in JavaScript applications, which was the feature I was building into an Angular 1.5.x app that eventually led to the Facebook rant.

Filtering data in AngularJS apps is a common and easy task, until you need to apply queries that don’t easily map to a property in your data model, and use several such queries at the same time.

User Case

Imagine that you run a bigger Andela, training and recruiting developers across the world for software gigs in big tech companies. You’ve succeeded at this for several years and now have a huge database of developers trained and placed overtime. You have an internal app on this developer data, with each developer represented in JSON thus :

[ {
    "name": "Dara Dunn",
    "dob": "Oct 12, 1988",
    "city": "North Vancouver",
    "country": "Chile",
    "company": "Dolor Donec Fringilla Associates",
    "tags": "GDE, Game"
}, ... ];

Default Filtering In Angular 1.x

With the data structure above, we can easily implement filtering thus :

<section ng-controller="DefaultFilters">
<p>
    <input type="text" ng-model="search"
           size="30"
           placeholder="name, city, country ...">
    &nbsp; {{match.length}} of {{developers.length}}
</p>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>DOB</th>
            <th>Company</th>
            <th>Location</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="dev in developers | filter: search as match">
            <td>{{dev.name}}</td>
            <td>{{dev.dob}}</td>
            <td>{{dev.company}}</td>
            <td>{{dev.city}}, {{dev.country}}</td>
        </tr>
    </tbody>
</table>
</section>
.....
.controller("DefaultFilters", function($scope, dataFactory){
    var DF = dataFactory;
    DF.loadDevelopers(function(devs){
        $scope.developers  = devs;
    });
})

And with this, we can filter the data by the name, date of birth, city, country or tags of a developer. See it in action here.

However, in a real world application with lots of data on our sample model, I expect filtering the data in more interesting ways. Users will need more “logical” or “contextual” queries that may map to one or several fields of the matching object. A simple example will be using “Q1” to filter for developers born in the first quarter of any year, or “SSA” to filter for developers whose country field matches one of the countries in Sub-Saharan Africa.

sure you’re getting my drift ..

OK. So how would you implement such “contextual” queries in an Angular or vanilla JS app ? How would you implement combining these queries so as to apply multiple filters to the data at any one time? Such that “SSA, Q1” would produce only developers from Sub-Saharan Africa and born in the first quarter

https://js-filters.firebaseapp.com/ is my experiment on multiple contextual data filtering in JS apps. A followup article to this post will explain my implementation, but do check it out and share your thoughts as comments below or tweet at me via @chaluwa