javascript - 在对象数组中过滤数组
问题描述
我有这个数组:
[
{
"title": "fruit",
"categories": [
"apple",
"banana"
]
},
{
"title": "city",
"categories": [
"Brazil",
"EUA",
"China"
]
},
{
"title": "name",
"categories": [
"Ana"
]
}
]
我想通过用户输入的任何术语来过滤它
我已经得到了这个,仅适用于标题,但我想按标题和类别搜索:
array.filter(f => f.title.includes(myString))
解决方案
||
与.some
检查交替f.categories
:
array.filter(f =>
f.title.includes(myString) ||
f.categories.some(
category => category.includes(myString)
)
);
现场演示:
const array = [
{
"title": "fruit",
"categories": [
"apple",
"banana"
]
},
{
"title": "city",
"categories": [
"Brazil",
"EUA",
"China"
]
},
{
"title": "name",
"categories": [
"Ana"
]
}
];
const input = document.querySelector('input');
input.addEventListener('input', () => {
document.querySelector('div').textContent = JSON.stringify(
array.filter(f =>
f.title.includes(input.value) ||
f.categories.some(
category => category.includes(input.value)
)
)
);
});
<input>
<div></div>
这不是您的原始代码正在实现的逻辑,但如果您还需要检查不同的大小写匹配:
const array = [
{
"title": "fruit",
"categories": [
"apple",
"banana"
]
},
{
"title": "city",
"categories": [
"Brazil",
"EUA",
"China"
]
},
{
"title": "name",
"categories": [
"Ana"
]
}
];
const input = document.querySelector('input');
input.addEventListener('input', () => {
const value = input.value.toLowerCase();
document.querySelector('div').textContent = JSON.stringify(
array.filter(f =>
f.title.toLowerCase().includes(value) ||
f.categories.some(
category => category.toLowerCase().includes(value)
)
)
);
});
<input>
<div></div>
推荐阅读
- javascript - 传递颜色作为道具
- python - 来自 CircleCI 工件文件的引诱报告显示“引诱报告未知”
- jasper-reports - iReport:满足条件时隐藏交叉表行
- bash - 如何在shell脚本中连接变量中包含空格的文件夹路径列表
- javascript - Javascript 的 removeEventListener 不起作用
- python - 在 Python 中将 ctypes 用于消息框
- java - doAfterTerminate 在 Flux 完成之前发生
- python - 根据另一个txt文件的排列重新排列文本文件?(Python)
- sql - 保留表中的特定列
- nginx - Nginx 根据浏览器语言将 https 重定向到 http