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.

Answer 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);
  };

Answer 2

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.