如何解决JS动态对象过滤和链接数组
我有这个对象数组
const bnb = [
{
"id": "id1","img": ["tres","dos","uno"],"title": "one","city": "texas","saved": false,"tags": ["bath"]
},{
"id": "id2","img": ["quatro","uno","tres"],"title": "two","city": "denver","tags": ["wc"]
},{
"id": "id3","img": ["uno","title": "three","city": "vancouver","tags": ["wc","bath"]
},{
"id": "id4","img": ["dos","title": "four","city": "berlin","tags": ["bath","parking"]
},{
"id": "id5","quatro"],"title": "five","city": "paris","tags": ["loft","parking","kitchen"]
},{
"id": "id6","title": "six","city": "barcelona","wc"]
},{
"id": "id7","tres","title": "seven","city": "seul","tags": ["parking","wc","kitchen"]
}
]
我想按标签过滤列表。例如,当我单击复选框时,列表应根据选择的值给我过滤后的数组。当我单击复选框时,它会创建带有单击值的新数组,例如let checked = ["parking","kitchen"]
,它将与 bnb
<input type="checkbox" value="parking">Parking<br>
<input type="checkbox" value="kitchen">Kitchen<br>
...
我知道我可以使用这样的过滤器功能,但是它不能过滤数组。
let bnblist = bnb.filter(o => o.tags.includes(checked);
另一件事是过滤应减去数组,例如,如果我选择["parking","kitchen"]
,则它应返回id5和id7。基本上与&&运算符相似,但是它需要选择两个值并且有多个复选框,我不知道有多少用户要选择。
let bnblist = bnb.filter(o => o.tags === "parking" && "kitchen");
解决方法
您可以使用此代码。
let bnb = [{"id":"id1","img":["tres","dos","uno"],"title":"one","city":"texas","saved":false,"tags":["bath"]},{"id":"id2","img":["quatro","uno","tres"],"title":"two","city":"denver","tags":["wc"]},{"id":"id3","img":["uno","title":"three","city":"vancouver","tags":["wc","bath"]},{"id":"id4","img":["dos","title":"four","city":"berlin","tags":["bath","parking"]},{"id":"id5","quatro"],"title":"five","city":"paris","tags":["loft","parking","kitchen"]},{"id":"id6","title":"six","city":"barcelona","wc"]},{"id":"id7","tres","title":"seven","city":"seul","tags":["parking","wc","kitchen"]}]
let checked = ["parking","kitchen"]
let bnblist = bnb.filter(o => {
let res = 0;
o.tags.forEach(tag => res += checked.includes(tag));
return res == checked.length && o;
})
console.log(bnblist)
,
您只需要添加every
方法,该方法将遍历已检查的标签,并检查这些标签是否包含在过滤器当前元素的标签内。
const bnb = [{"id":"id1","kitchen"]
const result = bnb.filter(({ tags }) => checked.every(tag => tags.includes(tag)))
console.log(result)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。