ReactJs: Filtering nested objects

Question

How do I filter nested objects in React? Currently my function is only looking for the main title, not the nested ones.

export const treeData = [
  {
    title: 'Orange',
    key: '0-0',
    children: [
      {
        title: 'Anu',
        key: '0-0-0',
        isLeaf: true,
      },
      {
        title: 'Anurag',
        key: '0-0-1',
        isLeaf: true,
      },
    ],
  },
  {
    title: 'ABC',
    key: '0-1',
    children: [
      {
        title: 'leaf 1-0',
        key: '0-1-0',
        isLeaf: true,
      },
      {
        title: 'leaf 1-1',
        key: '0-1-1',
        isLeaf: true,
      },
    ],
  },
]

export default {
  treeData,
}

and the function is:

 const filtered = treeData.filter((data) => {
      return data.title.toLowerCase().includes(e.target.value.toLowerCase())
    })

So currently it is only searching the Orange and ABC, not the titles from children.

What format do you need to get the data in? Or what are you looking for? — wowandy
– wowandy, Commented Sep 8, 2021 at 15:32

Ryan Wheale · Accepted Answer · 2023-03-27 19:49:32Z

2

I recommend flattening the title values and then filtering. Note, the end result will contain a mixture of top level "parent" data and children.

const flattened = treeData.reduce((acc, data) => {
  acc.push(data, ...data.children)
  return acc;
}, []);

const filtered = flattened.filter((data) => {
  return data.title.toLowerCase().includes(e.target.value.toLowerCase())
})

If you only need a filtered list of top level data, you will need to do something like the following:

function dataIncludesTitle(data, title) {
  return data.title.toLowerCase().includes(title);
}

const searchValue = e.target.value.toLowerCase();
const filtered = treeData.filter((data) => {
  return dataIncludesTitle(data, searchValue) || data.children.some(child => dataIncludesTitle(child, searchValue));
})

UPDATE (from comments):

If you want to use the second solution, but you also want to only keep the children which contain the search value, you will need to do an additional map where you filter the children:

const filtered = treeData.filter((data) => {
  return dataIncludesTitle(data, searchValue) || data.children.some(child => dataIncludesTitle(child, searchValue));
}).map((data) => {
  return {
    ...data,
    children: data.children.filter((child) => dataIncludesTitle(child, searchValue))
  };
});

edited Mar 27, 2023 at 19:49

answered Sep 8, 2021 at 15:41

Ryan Wheale

28.7k11 gold badges87 silver badges105 bronze badges

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

2 Comments

Draco D Over a year ago

Really great solution! Is there a way for the last solution (getting the top level data), Is there a way to get the top level data and only the filtered list of children because right now implementing your solution (the last one), I get all the children instead of just those that match the title.

Ryan Wheale Over a year ago

I updated the answer as it was too much to type in a comment.

Giovanni Esposito · Accepted Answer · 2021-09-08 15:34:31Z

1

Something like:

const filtered = treeData.filter((data) => {
  return data.title.toLowerCase().includes(e.target.value.toLowerCase()) ||
         data.children.filter(x => x.title.toLowerCase().includes(e.target.value.toLowerCase())).length > 0
})

Look into data.children filtering subobject's title that contains e.target.value.toLowerCase().

answered Sep 8, 2021 at 15:34

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

2 Comments

WildThing Over a year ago

worked like a charm! cannot believe it's just one line hahah I spent an hour. Thank you

Giovanni Esposito Over a year ago

@WildThing No problem. Happy coding =)

wowandy · Accepted Answer · 2021-09-08 16:00:23Z

If you want to get full objects containing child objects with a title similar to the search string, try this:

const treeData = [
  {
    title: 'Orange',
    key: '0-0',
    children: [
      {
        title: 'Anu',
        key: '0-0-0',
        isLeaf: true,
      },
      {
        title: 'Anurag',
        key: '0-0-1',
        isLeaf: true,
      },
    ],
  },
  {
    title: 'ABC',
    key: '0-1',
    children: [
      {
        title: 'leaf 1-0',
        key: '0-1-0',
        isLeaf: true,
      },
      {
        title: 'leaf 1-1',
        key: '0-1-1',
        isLeaf: true,
      },
    ],
  },
];

const searchString = 'ANUR';

const filtered = treeData.filter((datum) => {
  const filteredChilds = datum.children.filter((child) => child.title.toLowerCase().includes(searchString.toLowerCase()));
  return filteredChilds.length > 0;
});

console.log(filtered);

If you want to get these objects and only matched child objects try this:

const treeData = [{
    title: 'Orange',
    key: '0-0',
    children: [{
        title: 'Anu',
        key: '0-0-0',
        isLeaf: true,
      },
      {
        title: 'Anurag',
        key: '0-0-1',
        isLeaf: true,
      },
    ],
  },
  {
    title: 'ABC',
    key: '0-1',
    children: [{
        title: 'leaf 1-0',
        key: '0-1-0',
        isLeaf: true,
      },
      {
        title: 'leaf 1-1',
        key: '0-1-1',
        isLeaf: true,
      },
    ],
  },
];

const searchString = 'ANUR';

const filtered = treeData.map((datum) => {
  const filteredChilds = datum.children.filter((child) => child.title.toLowerCase().includes(searchString.toLowerCase()));
  return {
    ...datum,
    children: filteredChilds
  };
}).filter(datum => datum.children.length > 0);

console.log(filtered);

If you want to get only matched child objects try this:

const treeData = [{
        title: 'Orange',
        key: '0-0',
        children: [{
            title: 'Anu',
            key: '0-0-0',
            isLeaf: true,
          },
          {
            title: 'Anurag',
            key: '0-0-1',
            isLeaf: true,
          },
        ],
      },
      {
        title: 'ABC',
        key: '0-1',
        children: [{
            title: 'leaf 1-0',
            key: '0-1-0',
            isLeaf: true,
          },
          {
            title: 'leaf 1-1',
            key: '0-1-1',
            isLeaf: true,
          },
        ],
      },
    ];

    const searchString = 'ANUR';

    const filtered = treeData.reduce((acc, datum) => acc.concat(datum.children.filter((child) => child.title.toLowerCase().includes(searchString.toLowerCase()))), []);

    console.log(filtered);

Collectives™ on Stack Overflow

ReactJs: Filtering nested objects

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related