How to implement a Search inside a Nested Array of Objects?

Question

I want to implement a keyword search for a field which is located inside Nested Array of Objects. How can I achieve it?

Data -

const groupList = [{
 "group_name": "General",
 "trainings": [
    {
        "id": 1,
        "training_name": "Plural Sight",
    },
    {
        "id": 2,
        "training_name": "Google Maps",
    }
 ]
}]

Code -

const [groupsData, setGroupsData] = useState([]);

const lowerContains = (str1, str2) => str1 && str2 && str1.toLowerCase().indexOf(str2.toLowerCase()) !== -1;

const handleSearch = searchKeyword => {
    if (searchKeyword && searchKeyword.trim()) {
      const groupFiltered = groupList.filter(item => item.group_name && lowerContains(item.group_name, searchKeyword));
      setGroupsData( groupFiltered );
      return;
    }
    setGroupsData({ [...groupList] });
};

Currently I am able to search with group_name but I want to also search with training_name inside trainings.

what is inside lowerContains() function?

VMT
– VMT

2022-05-21 05:35:25 +00:00
Commented May 21, 2022 at 5:35 — VMT
– VMT, Commented May 21, 2022 at 5:35
@VMT Added the function.

Federick J
– Federick J

2022-05-21 10:21:45 +00:00
Commented May 21, 2022 at 10:21 — Federick J
– Federick J, Commented May 21, 2022 at 10:21

Nick Parsons · Accepted Answer · 2022-05-21 05:41:22Z

Assuming you want to keep the group object if the searchKeyword is contained within the group name OR one of the training name objects, you can use .some(). By using .some() on trainings, you can check if there is at least one object within the trainings array that contains a training_name value that matches your keyword search:

const groupFiltered = groupList.filter(item => 
  (item.group_name && lowerContains(item.group_name, searchKeyword)) ||
  (item.trainings.some(training => lowerContains(training.training_name, searchKeyword)))
);

Note: In the example data you shared, group_name always contains a value, so you can remove the item.group_name && check if that is always the case.

See working example below:

const groupList = [{ "group_name": "General", "trainings": [{ "id": 1, "training_name": "Plural Sight", }, { "id": 2, "training_name": "Google Maps", } ] }];
const lowerContains = (x, y) => x.toLowerCase().includes(y.toLowerCase());

const searchKeyword = "Plural";
const groupFiltered = groupList.filter(item => 
  (item.group_name && lowerContains(item.group_name, searchKeyword)) ||
  (item.trainings.some(training => lowerContains(training.training_name, searchKeyword)))
);

console.log(groupFiltered);

Amila Senadheera · Accepted Answer · 2022-05-21 05:35:40Z

1

You can search inside the trainings if group_name is not matched using Array.prototype.some() operation on the trainings.

Try like below.

  const handleSearch = (searchKeyword) => {
    if (searchKeyword && searchKeyword.trim()) {
      const groupFiltered = groupList.filter(
        (item) =>
          (item.group_name && lowerContains(item.group_name, searchKeyword)) ||
          item.trainings.some(({ training_name }) =>
            lowerContains(training_name, searchKeyword)
          )
      );
      setGroupsData(groupFiltered);
      return;
    }
    setGroupsData(groupList);
  };

answered May 21, 2022 at 5:35

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

Comments

Ali Valizadeh · Accepted Answer · 2022-05-21 05:39:46Z

1

You can use javascript's "Array.some" method.

const containsTraining = (item, keyword) => {
  return item.some(
    (training) =>
      training.training_name && lowerContains(training.training_name, keyword)
  );
};

This will return true if item (one single group) contains at least one training that has the training name search keyword.

answered May 21, 2022 at 5:39

Ali Valizadeh

1145 bronze badges

Collectives™ on Stack Overflow

How to implement a Search inside a Nested Array of Objects?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related