Data filtering in React using Lodash

Question

I am currently making a Table component in React.js. My goal is to implement a search function similar to that one being used at https://www.datatables.net/.

Below is my code using filter and includes functions from Lodash library. This code does not work because it only looks for exact matches. For example if an object in my data array has fruit: "apple", the filter "app" has no matches.

  data = filter(data, (row) => {
    return includes(row, this.state.filter);
  });

Is there any way I can implement fuzzy search with any of lodash's built in functions? If not can you suggest another way?

enjoylife · Accepted Answer · 2015-12-04 23:50:45Z

3

lodash will not have what you need. Depending on your search requirements you could utilize a distance metric based search such as Levenshtein. Or maybe a substring length metric. For a library drop in, look at fuzzy

answered Dec 4, 2015 at 23:50

enjoylife

3,8612 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justin Handley · Accepted Answer · 2016-11-27 03:06:07Z

0

So, they are searching where characters in first and last name match what you are typing.

In lodash, you can use a filter like this..

.filter(contact => !(this.state.filter && contact.lastName.toLowerCase().indexOf(this.state.filter) == -1 && contact.firstName.toLowerCase().indexOf(this.state.filter) == -1))

This is assuming you are setting the search value to the state and that you are wanting to match the firstname / lastname fields. You should be able to modify this to meet your needs.

answered Nov 27, 2016 at 3:06

Justin Handley

1,2492 gold badges8 silver badges15 bronze badges

Collectives™ on Stack Overflow

Data filtering in React using Lodash

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related