JS Dynamic array dari pemfilteran dan rangkaian objek [duplikat]

Question

Saya memiliki berbagai objek ini

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"]
    }
]

Dan saya ingin memfilter daftar berdasarkan tag. misalnya ketika saya mengklik pada kotak centang daftar harus memberi saya array yang difilter berdasarkan nilai yang dipilih. Ketika saya mengklik kotak centang itu membuat array baru dengan nilai yang diklik misalnya let checked = ["parking", "kitchen"]yang mencocokkan objek tag di bnb

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

Saya tahu bahwa saya dapat menggunakan fungsi filter seperti ini, tetapi tidak memfilter array.

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

Hal lain adalah bahwa penyaringan harus mengurangi array misalnya jika saya memilihnya ["parking", "kitchen"]harus mengembalikan id5 dan id7. Pada dasarnya ini mirip dengan operator &&, tetapi membutuhkan dua nilai untuk dipilih dan ada beberapa kotak centang dan saya tidak tahu berapa banyak pengguna yang harus dipilih.

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

Answer 1

Anda dapat menggunakan kode ini.

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)

Answer 2

Anda hanya perlu menambahkan everymetode yang akan mengulangi tag yang dicentang dan memeriksa apakah itu termasuk di dalam tag dari elemen filter saat ini.

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)