deep filtering on array of objects

Question

I have data like this one below

let data = [
{
    name: 'basic',
    to: 'aaa',
    subMenus: [
      {
        name: 'general conc',
        to: 'geneal',
      },
      {
        name: 'example view',
        to: 'example',
      },
      {
        name: 'fancy',
        to: 'bbb',
        innerSubMenus: [
          {
            name: 'adding',
            to: 'add',
          },
          {
            name: 'getting',
            to: 'get',
          },
          
        ]
      }
    ]
  }

]

I need to filter data based on name (in main, subMenus, and innerSubMenus) Here is the piece of code

function deepFilter(inputText){
data.filter(items => items.name.toLowerCase().includes(inputText.toLowerCase()))
}

As you can see, the function filters the first prop (name --> basic in this case when inputText = 'basic', doesn't work when inputText = 'general conc') but I want to be able to filter names in subMenus and innerSubMenus as well. Please, guide me on how to do it. Thanks

expected outputs:

deepFilter('basic') -> true // only this part is covered by my implementation
deepFilter('general conc') -> true
deepFilter('adding') -> true
deepFilter('ffff') -> false //since there is not name with value of 'ffff' in data

Have you tried data.filter(items => items.name.toLowerCase().includes(inputText.toLowerCase()) && <other conditions>)? — theChoosyBeggar
– theChoosyBeggar, Commented Aug 29, 2021 at 18:36
Make your life a little easier, and split up the responsibilities: data.filter(items => preserveItem(item)) and then write a separate function preserveItem(item) that can return true or false depending on all the various conditions you need met. Now you've reduced the problem of "writing filtering code" to only writing out individual conditions that need to be met, and returning the "or" of their values. Fat arrow functions are super useful, but not if you need moderately complex code for which preserving declare-time-this is irrelevant, like here. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Aug 29, 2021 at 18:38
Does this answer your question? Filtering array of objects by searching nested object properties — Heretic Monkey
– Heretic Monkey, Commented Aug 30, 2021 at 12:41

lorem1213 · Accepted Answer · 2021-08-29 19:08:07Z

0

I think this should work well.

function deepFilter(inputText, datas) {
    return datas.filter(data => {
        function checkInsideObj(object, inputText) {
            for (let value of Object.values(object)) {
                if (object.name && object.name.toLowerCase() === inputText.toLowerCase()) {
                    return true;
                }
                if (Array.isArray(value)) {
                    return value.some(item => {
                        return checkInsideObj(item, inputText)
                    }
                    )
                }
            }
            return false;
        }
        return checkInsideObj(data, inputText)

    }
    )

}
deepFilter("input", data)

answered Aug 29, 2021 at 19:08

lorem1213

4645 silver badges17 bronze badges

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

1 Comment

lorem1213 Over a year ago

@Hakim it would have been been better if you had provided array with multiple items and then mentioned the result you expect.

Collectives™ on Stack Overflow

deep filtering on array of objects

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related