@empathyco/x-components/docs/API-reference/api/x-components.deepfilter.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [deepFilter](./x-components.deepfilter.md)

## deepFilter() function

Filters an array with all elements that pass the test implemented by the given filter function. If an item has another list of items in the `childrenKey` property it recursively filters that new list, adding it to the returned one.

**Signature:**

```typescript
export declare function deepFilter<Item extends {
    [key in Key]?: Item[];
}, Key extends keyof Item>(array: Item[], condition: (item: Item) => boolean, childrenKey: Key): Item[];
```

## Parameters

<table><thead><tr><th>

Parameter


</th><th>

Type


</th><th>

Description


</th></tr></thead>
<tbody><tr><td>

array


</td><td>

Item\[\]


</td><td>

Array to be filtered.


</td></tr>
<tr><td>

condition


</td><td>

(item: Item) =&gt; boolean


</td><td>

Predicate function to test each element of the array. It should return `true` to keep the element; or `false` otherwise.


</td></tr>
<tr><td>

childrenKey


</td><td>

Key


</td><td>

Property name within the array used to perform a recursive call.


</td></tr>
</tbody></table>

**Returns:**

Item\[\]

A new array with the elements that pass the condition, or an empty array if no one pass the test.

## Example

Input - Output example

```
const hierarchicalFilters: Filter[] = [
  {
    id: 'filter1'
    selected: true,
    children: [
      {
        id: 'filter1-1'
        selected: true,
        children: []
      },
      {
        id: 'filter1-2'
        selected: false,
        children: []
      }
    ]
  },
  {
    id: 'filter2',
    selected: false,
    children: [
     {
       id: 'filter2-1',
       selected: true // not should happen
     }
    ]
  }
]

 const filteredArray: Filter[] = deepFilterArray(
   hierarchicalFilters,
   filter => filter.selected,
   'children'
 )

 /*
   filteredArray = [
     {
       id: 'filter1'
       selected: true,
       children: [
         {
           id: 'filter1-1'
           selected: true,
           children: []
         },
         {
           id: 'filter1-2'
           selected: false,
           children: []
         }
       ]
     },
     {
       id: 'filter1-1'
       selected: true,
       children: []
     }
   ]
```