CODEWITHSUNDEEP
javascriptjsonperformancefilter
PatrikJ
PatrikJ

Reputation: 2398

Filter table using column and global filter - the most efficient way?

I have a large chunk of json data that I would like to filter client side in the most efficient way possible using a table. Each header has an input filter where the user can enter a string to filter that specific property. There is also a global input filter where the user can issue a "free text search".

Been thinking about ways to do that and would love to hear your opinion on the matter.

Example for purpose of visualizing the table

+---------------+
| Global filter |
+---------------+

+----------+---------+----------+-----------+
| Column 1 | Colum 2 | Column 3 |  Column 4 |
+----------+---------+----------+-----------+
|   ...    |   ...   |   ...    |    ...    |
+----------+---------+----------+-----------+

Option 1:

Upon clicking on a filter input:

  1. Generate a set of data from all populated filters except the filter clicked upon, and cache it.
  2. On key-up - filter the data based on the result from step 1.

This would be OK. But would still mean some overhead as some searches would be done many times.

Option 2:

  1. On key-up - filter based on cached searches
  2. On blur - Current result overwrites the cached search.

This would work even better if all I did was to add upon the filters. But the moment I want to change an already populated filter the logic "breaks".

Option 3:

This would be a mix of 1 and 2. Upon clicking on a filter input:

  1. If the filter does not contain the default value (ie. no filter data inputed by the user), generate a cache based on all filters except the current one.
  2. On key-up - filter based on cached searches
  3. On blur - Current result overwrites the cached search.

I've brainstorming on my own and option 3 is the best way I could come up with in terms of simplicity and performance.

Am I on the right path? What do you think?

/Patrik

Upvotes: 0

Views: 601

Answers (1)

Vinay
Vinay

Reputation: 7674

3rd option is better but it looks like there is a minor problem. Assuming you are using AND based filtering you should rather have steps like this

  1. If the filter does not contain the default value (ie. no filter data inputted by the user), generate a cache based on all filters except the current one.
  2. If filter contain some value then discard the cache. Generate a set of data from all populated filters except the filter clicked upon, and cache it.
  3. On key-up - filter based on above cached result.
  4. On blur - Current result overwrites the cached search.

details = [ {user:"A",location:"kansas"}, {user:"B",location:"kansas"}, {user:"C",location:"phoenix"}, {user:"D",location:"phoenix"} ]

Assume [ ] is a text box. At first both are empty [user=""] [location=""]

Now user enter a city [user=] [location=kansas]

//final cache :[{user:"A",location:"kansas"},{user:"B",location:"kansas"}]

now the user tries to enter username

[user=A] [location=kansas]

Cache used for search :[{user:"A",location:"kansas"},{user:"C",location:"kansas"}]

// final cache after step 3: `[{user:"A",location:"kansas"}]`

Now user wants to enter another city [user=A] [location=phoenix] // gives 0 results

cache used for search :[{user:"A",location:"kansas"}]

Whenever filtering by some filter say “location” you should not use the result set already reduced by this filter previously.

Upvotes: 1

Related Questions