How to search for elements inside JSON array of objects

Question

I am trying to create a search filter for accordion data which has to search in the title as well as the contents inside. It must search for the name key.

I have implemented a function for the same but with that approach, I am not able to search for name inside the children key.

let filteredTiles = this.tileData.filter((value) => {  //tileData is the JSON array
    return value.name.toLowerCase().indexOf(searchValue) != -1 ? value : null;
});

How is it possible to search within the children from the JSON data?

Demo at Stackblitz

My JSON data is

[
    {
      "name": "First",
      "image": "https://img.freepik.com/free-vector/football-2022-tournament-cup-background_206725-604.jpg?size=626&ext=jpg",
      "children": [
        {
          "name": "Firstone",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        },
        {
          "name": "Firsttwo",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        },
        {
          "name": "Firstthree",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        }
      ]
    },
    {
      "name": "Second",
      "image": "https://media.istockphoto.com/id/517188688/photo/mountain-landscape.jpg?s=612x612&w=0&k=20&c=A63koPKaCyIwQWOTFBRWXj_PwCrR4cEoOw2S9Q7yVl8=",
      "children": [
        {
          "name": "Secondone",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        },
        {
          "name": "Secondtwo",
          "image": "https://media.istockphoto.com/id/517188688/photo/mountain-landscape.jpg?s=612x612&w=0&k=20&c=A63koPKaCyIwQWOTFBRWXj_PwCrR4cEoOw2S9Q7yVl8=",
          "url": "http://www.google.com"
        },
        {
          "name": "Secondthree",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        }
      ]
    },

]

Yong Shun · Accepted Answer · 2022-12-18 04:16:15Z

1

This works similarly on how you filter the object in an array.

In the predicate, you have to filter the nested object in the array. If the filtering of a nested array return index greater than -1, means that there are nested object(s) that fulfill the filter criteria.

Besides, you can work with Array.some(predicate) which returns boolean value as alternative of Array.findIndex(predicate) > -1.

this.tileData.filter((value) => {
  return 
    value.children.some(
      (c) => c.name.toLowerCase().indexOf(searchValue) > -1
    )
  ;
});

If you want to filter whether the root object or nested children fulfill the filter criteria, you should use the || (or) operator.

let filteredTiles = this.tileData.filter((value) => {
  return (
    value.name.toLowerCase().indexOf(searchValue) > -1 ||
    value.children.some(
      (c) => c.name.toLowerCase().indexOf(searchValue) > -1
    )
  );
});

Demo @ StackBlitz

edited Dec 18, 2022 at 4:16

answered Dec 18, 2022 at 4:02

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

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

6 Comments

Syed Abdul Hannan Over a year ago

With that approach if a value matches in nested children then all the nested children are being showed up instead of only the ones which have that search value. How can we fetch only the nested children which consist of search value ?

Yong Shun Over a year ago

For my working, after filter, I will use Array.map() to transform each object and perform filtering for matched objects in the children array. Demo

Syed Abdul Hannan Over a year ago

How can I search for "name" in the main object and get all the children it has along with the above functionality as well?

Yong Shun Over a year ago

Maybe this Demo fulfills your requirement as the comment above.

Yong Shun Over a year ago

Read the code in detailed. I had amend in the children.filter() part.

|

Collectives™ on Stack Overflow

How to search for elements inside JSON array of objects

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related