[Fixed] How to make filter pipe which can work for multiple levels of array of objects

Issue

I am looking for solutions to improve my pipe which can search for multiple levels.

My current pipe is not going through all the levels which leads to improper search results.

Example:

When I type ab I am not getting all matches with the ab.

It is only searching for non-nested elements.

Below is my stackblitz.

https://stackblitz.com/edit/angular-929hve

Solution

Can you replace your block of code

return filterKeys.some((keyName) => {
                            return new RegExp(filter[keyName], 'gi').test(item[keyName]) || 
                            new RegExp(filter[keyName], 'gi').test(item.data[keyName]) ||
                            filter[keyName] == "";
                        });

with this:

return (
                new RegExp(filter[keyName], "gi").test(item[keyName]) ||
                new RegExp(filter[keyName], "gi").test(item.data[keyName]) ||
                new RegExp(filter[keyName], "gi").test(item.data.data) ||
                filter[keyName] == ""
              );

I have added an additional line here if you notice and this will fix the nesting based on your data structure.

Also, for the search to work for all fields, there is a small error in your code while traversing through the keys. Replace the content of your else block with this code:

let keys = [];
        return items.filter(item => {
          keys = Object.keys(item);
          keys.push(...Object.keys(item.data));
          return keys.some(keyName => {
            console.log(keyName);
            return (
              new RegExp(filter, "gi").test(item[keyName]) ||
              new RegExp(filter, "gi").test(item.data[keyName]) ||
              new RegExp(filter, "gi").test(item.data.data) ||
              filter[keyName] == ""
            );
          });
        });