Using array.filter down multiple levels

Question

I have a filter function, which uses filter to quickly search a text in an array:

filtered = filtered.filter((row) => {
   return Object.keys(row).some((key) => {
        return String(row[key]).toLowerCase().indexOf(this.quickSearch.toLowerCase()) > -1
      })
   })

This works great for single level array, but not sure how to adapt it to work down unknown number of levels of array of objects like this

{
   'name': 'james',
   'post': {
        'name': 'my favorite teams'
    }
}

The code above finds james, no problem, but it will not find teams as its not going deep enough.

Naturally I don't want to hardcode something like if row[key] == 'post', because I'm using this code for multiple data sources and need it to be dynamic.

How do I adapt this to work in multi level arrays like the example above?

I don't understand how that code would work with the example input you provided. The example you've shown is an object, not an array. The filter method can only be used on arrays. — djfdev
– djfdev, Commented Dec 14, 2017 at 23:42
Is there only one level down (like the example) or there could be more? — ibrahim mahrir
– ibrahim mahrir, Commented Dec 14, 2017 at 23:50
one level of array, but multiple objects within objects - sorry I mislabelled the question — yoyoma
– yoyoma, Commented Dec 14, 2017 at 23:51

ibrahim mahrir · Accepted Answer · 2017-12-15 00:06:03Z

4

If there are many levels, then recursion is the best solution:

let searchString = this.quickSearch.toLowerCase();                       // do this only once instead of calling toLowerCase over and over again, besides we are using a regular function (not an arrow one) so "this" will be messed up anyways
filtered = filtered.filter(function search(row) {                        // name the function so we can use recursion (thus we can't use an arrow function)
   return Object.keys(row).some((key) => {                               // ...
       if(typeof row[key] === "string") {                                // if the current property is a string
           return row[key].toLowerCase().indexOf(searchString) > -1;     // then check if it contains the search string
       } else if(row[key] && typeof row[key] === "object") {             // oterwise, if it's an object
           return search(row[key]);                                      // do a recursive check
       }
       return false;                                                     // return false for any other type (not really necessary as undefined will be returned implicitly)
   });
});

answered Dec 15, 2017 at 0:06

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

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

1 Comment

yoyoma Over a year ago

just like magic! exactly what I was after with explanations too! thanks

SimpleJ · Accepted Answer · 2017-12-14 23:55:00Z

2

You could use a recursive function that calls itself on the values of objects and arrays (using Object.values and Array#some):

const containsDeep = (text) => (value) => {
  if(!value) return false;
  const valueType = typeof value;
  
  if(valueType === 'string') {
    return value.toLowerCase().indexOf(text.toLowerCase()) > -1;
  }
  if(Array.isArray(value)) {
    return value.some(containsDeep(text));
  }
  if(valueType === 'object') {
    return Object.values(value).some(containsDeep(text));
  }
  return false;
};

const data = [
  {
   'name': 'bar',
   'post': {
      'name': 'my favorite teams'
    }
  },
  {
    'name': 'fizz',
    'posts': [{'name': 'buzz'}]
  },
  {
    'name': 'bla',
    'post': {
      'name': 'blee',
      'comments': [null, {'name': 'bar'}]
    }
  },
  {
   'name': 'foo',
   'post': {
      'name': 'bar'
    }
  }
];

const result = data.filter(containsDeep('bar'));
console.log(result);

answered Dec 14, 2017 at 23:55

SimpleJ

15k13 gold badges62 silver badges98 bronze badges

3 Comments

ibrahim mahrir Over a year ago

typeof null === "object".

SimpleJ Over a year ago

if(!value) return false; I specifically added a case where null is encountered (third element of data).

ibrahim mahrir Over a year ago

Ah! I didn't see that.

Collectives™ on Stack Overflow

Using array.filter down multiple levels

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related