JS 对象过滤和链接的动态数组

Question

我有这个对象数组

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",
        "saved": false,
        "tags": ["wc"]
    },
    {
        "id": "id3",
        "img": ["uno", "dos", "tres"],
        "title": "three",
        "city": "vancouver",
        "saved": false,
        "tags": ["wc", "bath"]
    },
    {
        "id": "id4",
        "img": ["dos", "uno", "tres"],
        "title": "four",
        "city": "berlin",
        "saved": false,
        "tags": ["bath", "parking"]
    },
    {
        "id": "id5",
        "img": ["tres", "uno", "quatro"],
        "title": "five",
        "city": "paris",
        "saved": false,
        "tags": ["loft", "parking", "kitchen"]
    },
    {
        "id": "id6",
        "img": ["quatro", "uno", "tres"],
        "title": "six",
        "city": "barcelona",
        "saved": false,
        "tags": ["bath", "wc"]
    },
    {
        "id": "id7",
        "img": ["uno", "tres", "quatro"],
        "title": "seven",
        "city": "seul",
        "saved": false,
        "tags": ["parking", "wc", "kitchen"]
    }
]

我想按标签过滤列表。例如，当我点击复选框时，列表应该根据 selected 值给我过滤的数组。当我单击复选框时，它会创建具有单击值的新数组，例如 let checked = ["parking", "kitchen"] 匹配 bnb[=16= 中的 tags 对象]

    <input type="checkbox" value="parking">Parking<br>
    <input type="checkbox" value="kitchen">Kitchen<br>
...

我知道我可以像这样使用过滤函数，但它不会过滤数组。

let bnblist = bnb.filter(o => o.tags.includes(checked);

另一件事是过滤应该减去数组，例如，如果我 selected ["parking", "kitchen"] 它应该 return id5 和 id7。基本上它类似于 && 运算符，但它需要两个值 selected 并且有多个复选框，我不知道有多少用户要 select.

let bnblist = bnb.filter(o => o.tags === "parking" && "kitchen");

Answer 1

您只需要添加 every 方法，该方法将遍历选中的标签并检查这些标签是否包含在过滤器当前元素的标签内。

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","saved":false,"tags":["wc"]},{"id":"id3","img":["uno","dos","tres"],"title":"three","city":"vancouver","saved":false,"tags":["wc","bath"]},{"id":"id4","img":["dos","uno","tres"],"title":"four","city":"berlin","saved":false,"tags":["bath","parking"]},{"id":"id5","img":["tres","uno","quatro"],"title":"five","city":"paris","saved":false,"tags":["loft","parking","kitchen"]},{"id":"id6","img":["quatro","uno","tres"],"title":"six","city":"barcelona","saved":false,"tags":["bath","wc"]},{"id":"id7","img":["uno","tres","quatro"],"title":"seven","city":"seul","saved":false,"tags":["parking","wc","kitchen"]}]
let checked = ["parking", "kitchen"]

const result = bnb.filter(({ tags }) => checked.every(tag => tags.includes(tag)))
console.log(result)

Answer 2

您可以使用此代码。

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","saved":false,"tags":["wc"]},{"id":"id3","img":["uno","dos","tres"],"title":"three","city":"vancouver","saved":false,"tags":["wc","bath"]},{"id":"id4","img":["dos","uno","tres"],"title":"four","city":"berlin","saved":false,"tags":["bath","parking"]},{"id":"id5","img":["tres","uno","quatro"],"title":"five","city":"paris","saved":false,"tags":["loft","parking","kitchen"]},{"id":"id6","img":["quatro","uno","tres"],"title":"six","city":"barcelona","saved":false,"tags":["bath","wc"]},{"id":"id7","img":["uno","tres","quatro"],"title":"seven","city":"seul","saved":false,"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)

JS 对象过滤和链接的动态数组

JS Dynamic array of object filtering and chaining

javascript

arrays

filter

chaining