Dynamic array filtering by object property

Question

I have a react live search dropdown component that filters through an array of objects by a search term. It filters my objects by title and then returns a list of all the related objects. This works fine.

Current:

Data Structure

data: [
    { id: 1, title: 'Some title here' },
    { id: 2, title: 'Another title' },
    { id: 3, title: 'last title' },
]

Component

   <LiveSearch
        term={term}
        data={data} />

Inside Live search component

Filter data by term and render list

return data
        .filter(item => item.title.toLowerCase().includes(term.toLowerCase())
        .map((item, idx) => <li key={idx}>{item.title}</li>

My objects to search by are getting more advanced and what I would like to be able to do is pass into my component an array of property names I would like to compare to the search term.

My thinking process behind it is to loop through the object properties and if on of the properties matches the term the loop breaks and returns true adding that object to the list of items to be displayed.

Goal

Data Structure

data: [
    { id: 1, country: 'Canada', title: 'Some title here' },
    { id: 2, country: 'Australia', title: 'Another title' },
    { id: 3, country: 'Netherlands', title: 'last title' },
]

Component

<LiveSearch
   searchFields={['country', 'title']}
   term={term}
   data={data} />

Inside Component filtering

return data
         .filter(item => {
            // Dynamic filtering of terms here
         })
         .map((item, idx) => <li key={idx}>{item.title}</li>

Inside the filter I'm trying to get a loop through the array and dynamically produce logic similar to this

item.searchFields[0].toLowerCase().includes(term.toLowerCase()) ||
item.searchFields[1].toLowerCase().includes(term.toLowerCase())

But obviously could loop over an infinite number of searchfields/properties

charlietfl · Accepted Answer · 2018-11-14 17:46:56Z

4

Use Array#some()

Something like

term = term.toLowerCase()
return data
  .filter(item => {
    return searchFields.some(field => item[field].toLowerCase().includes(term))
  }).map(...

edited Nov 14, 2018 at 17:46

answered Nov 14, 2018 at 17:41

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

Jonas Wilms · Accepted Answer · 2018-11-14 17:43:14Z

1

Check if some of the searchFields match:

// Checks wether a value matches a term
const matches = (value, term) => value.toLowerCase().includes(term.toLowerCase());

 // Checks wether one of the fields in the item matcues the term
 const itemMatches = (fields, term) => item => fields.some(field => matches(item[field], term);

 // Filter the data to only contain items where on of the searchFields matches the term
 const result = props.data.filter( itemMatches(props.searchFields, props.term) );

 return result.map(item => <li key={idx}>{item.title}</li>);

answered Nov 14, 2018 at 17:43

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

zfrisch · Accepted Answer · 2018-11-14 18:02:46Z

1

You can use Array .some combined with .filter

let result = data.filter(obj => 
  searchFields.some(s => 
  obj[s] != undefined && obj[s].toLowerCase() === term
));

let data = [
    { id: 1, country: 'Canada', title: 'Some title here' },
    { id: 2, country: 'Australia', title: 'Another title' },
    { id: 3, country: 'Netherlands', title: 'last title' },
], searchFields = ["country", "title"], term = "canada";

let result = data.filter(obj => 
  searchFields.some(s => 
  obj[s] != undefined && obj[s].toLowerCase() === term
));

console.log(result);

edited Nov 14, 2018 at 18:02

answered Nov 14, 2018 at 17:46

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

3 Comments

Jonas Wilms Over a year ago

That is really overcomplicating things.

zfrisch Over a year ago

@JonasWilms Possibly? That's not really a constructive comment. Care to elaborate?

Jonas Wilms Over a year ago

That flag ? I mean you always check all the properties, you could actually exit after the first found.

Collectives™ on Stack Overflow

Dynamic array filtering by object property

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related