Underscore js easy javascript object hierarchical filtering


Just want to share something that in my opinion is really a useful helper library, and that is underscore.js

When combined with knockout, you can achieve easy filtering through its helper functions.

Let's say we have an object structure like this:

Company A
  - Boss A
      - Supervisor A
          - Employee A
          - Employee B
          - Employee C
      - Supervisor B
          - Employee C
          - Employee D
  - Boss B
      - Supervisor C
          - Employee A
          - Employee C

Company B

and after you are getting the all records, you want to provide some filtering based on the Boss, Supervisor or Employee. (to make it simple I just use dropdowns)

Using underscore, I can grab the list of unique values of Boss, Supervisor and Employee like this:

After that, if you are using knockout then you can bind the list to a dropdown, and using the selected value of the observable you can then create filter functions your original data:
Then you will just need to have a computed observable to return your filtered data:

Hope this helps,


Post a Comment