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

发布于05月21日

我想对位于嵌套对象数组中的字段执行关键字搜索.我怎样才能做到这一点？

数据-

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搜索，但我也想用trainings中的training_name搜索.

推荐答案

如果searchKeyword包含在group name或其中一个training name对象中，则假设要保留group对象，可以使用.some().通过在trainings上使用.some()，可以判断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);

Javascript相关问答推荐

如何在Jest中调用setupFile下列出的文件所需的函数？

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

推荐答案

Javascript相关问答推荐

如何在Jest中调用setupFile下列出的文件所需的函数？

无法在page. evalve()内部使用外部函数

React状态变量在使用++前置更新时引发错误

我的glb文件没有加载到我的three.js文件中

如何修复循环HTML元素附加函数中的问题？

togglePopover()不打开但不关闭原生HTML popover'

在vercel throws上部署带有gunjs的sveltekit应用无法找到模块./' lib/文本编码'

如何使覆盖div与可水平滚动的父div相关？

引用在HTMLAttributes<；HTMLDivElement>；中不可用

如何添加绘图条形图图例单击角形事件

CheckBox作为Vue3中的一个组件

如何在ASP.NET JavaScript中使用Google Charts API仅对绘制为负方向的条形图移动堆叠条形图标签位置

在HTML语言中调用外部JavaScript文件中的函数

Web Crypto API解密失败，RSA-OAEP

使用VUE和SCSS的数字滚动动画(&；内容生成)

根据一个条件，如何从处理过的数组中移除一项并将其移动到另一个数组？

为什么客户端没有收到来自服务器的响应消息？

MarkLogic-earch.suggest不返回任何值

P5.js中的分形树

Socket.IO在刷新页面时执行函数两次