如何在嵌套的对象数组中实现搜索？

Jay 发表于 Dev

周杰伦

我想为位于嵌套对象数组中的字段实现关键字搜索。我怎样才能实现它？

数据 -

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

代码 -

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

目前我可以使用搜索，group_name但我也想使用training_nameinside进行搜索trainings。

尼克帕森斯

searchKeyword假设如果包含在组名称或训练名称对象之一中，您想要保留组对象，您可以使用.some(). 通过使用.some()on trainings，您可以检查数组中是否至少有一个对象trainings包含training_name与您的关键字搜索匹配的值：

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

注意：在您共享的示例数据中，group_name始终包含一个值，因此您可以删除item.group_name &&检查是否始终如此。

请参阅下面的工作示例：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。