Geeks With Blogs

News Welcome to my programming blog. I am a software developer living in Hertfordshire, United Kingdom.

I've been a keen developer for over a decade, most of it spent on C#/.Net development with ever increasing amounts of Javascript and I am an avid biker as well.

Please feel free to leave a comment if you found a post useful :-).

My twitter handle is BikerDev.

My LinkedIn profile.
Ritesh Singh's Programming Blog .Net and more

Any .Net developer would have come across Linq, it's unavoidable and not in a bad way unless you're stuck on .Net 2.0 for some reason. In fact once you're used to querying and filtering collections using linq or lambda expressions you're unlikely to want to ever do anything crude like running multiple for loops to filter data.

Recently I came across a requirement where json returned from a web api call needed to be filtered at the client side. Instead of trying to filter json using bespoke functions which would have taken more time than what was available and would have required rigorous testing I naturally attempted to look for a linq like experience in javascript that could do the heavy lifting.

Luckily someone had already thought of this and had come up with jsLinq http://jslinq.codeplex.com/. Turns out that using this very compact and easy to understand library one can filter and sort javascript object collections using the familiar Select, Where and OrderBy syntax as well as use nice functions like First and FirstOrDefault. Another feature is the inclusion of a vsdoc file that includes some javascript IntelliSense in case you’re using Visual Studio.

I’ll explain with some examples. Let’s take a collection of motorcycle objects as follows…

   1: var bikes = [
   2:         {
   3:             Model: "Fireblade",
   4:             Capacity: 1000,
   5:             Power: 175,
   6:             Abs: true,
   7:             Category: "Sport"
   8:         },
   9:         {
  10:             Model: "Blackbird",
  11:             Capacity: 1100,
  12:             Power: 165,
  13:             Abs: false,
  14:             Category: "SportTourer"
  15:         },
  16:         {
  17:             Model: "CBR250",
  18:             Capacity: 250,
  19:             Power: 25,
  20:             Abs: true,
  21:             Category: "Street"
  22:         },
  23:         {
  24:             Model: "VFR800",
  25:             Capacity: 800,
  26:             Power: 110,
  27:             Abs: true,
  28:             Category: "SportTourer"
  29:         }
  30:     ];

Let’s say we need to filter the collection above to all bikes with a capacity of 1000cc or more.  The code and results are as follows…

   1: var bikes = new JSLINQ(bikes)
   2:                .Where(function (bike) { return bike.Capacity >= 1000 });
   3:  
   4: console.log(bikes);

and here are the results as seen in Chrome’s console window

Bikes 1000cc and above.

Similar to the example above a few other scenarios are as follows…

 

Get all bikes in the order of capacity / engine size

   1: var bike = new JSLINQ(bikes)
   2:             .OrderBy(function (bike) { return bike.Capacity });

 

Filter motorcycles by multiple categories. In this instance get all sports tourers and sports bikes.

   1: var bikes = new JSLINQ(bikes)
   2:               .Where(function (bike) { return (bike.Category == "SportTourer" && bike.Category == "Sport") });

 

Get all bikes with capacity greater than a 1000cc and order the result by capacity…

   1: var bikes = new JSLINQ(bikes)
   2:                 .Where(function (bike) { return bike.Capacity >= 1000 })
   3:                 .OrderBy(function (bike) { return bike.Capacity });

 

Get the first item in the collection…

   1: var bikes = new JSLINQ(bikes)
   2:                 .First(function (bike) { return bike });

 

Return a custom result in case the query does not return any items…

   1: var bikes = new JSLINQ(bikes)
   2:                 .Where(function (bike) { return bike.Capacity < 100 })
   3:                 .FirstOrDefault("No result.");
Posted on Saturday, August 31, 2013 3:20 PM Javascript | Back to top


Comments on this post: Filter and Sort JSON in Javascript

# re: Filter and Sort JSON in Javascript
Requesting Gravatar...
Wow...
Basic and informative
Left by Taj on Sep 02, 2013 7:03 AM

Your comment:
 (will show your gravatar)


Copyright © BikerDev | Powered by: GeeksWithBlogs.net