JS Dynamic array of object filtering and chaining

Question

I have this array of objects

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

And I'd like to filter list by tags. e.g when I click on checkbox the list should give me filtered array based on selected value. When I click on checkbox it creates new array with clicked value e.g let checked = ["parking", "kitchen"] which is to match tags object in bnb

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

I know that I could use filter function like this, but it doesn't filter array.

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

Other thing is that filtering should subtract array e.g if I selected ["parking", "kitchen"] it should return id5 and id7. Basically it's similar to && operator, but it needs two values to be selected and there are multiple checkboxes and I don't know how many user is goint to select.

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

score 2 · Accepted Answer · answered Sep 30 '20 at 20:29

You can use this code.

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)

That's beautiful. Much appreciated for your time to help me! :) — Jon Levi, Sep 30 '20 at 20:37

Nenad Vracar · Answer 2 · 2020-09-30T20:39:43.807

You just need to add every method that will iterate over checked tags and check if those are included inside tags of the current element of filter.

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)

JS Dynamic array of object filtering and chaining

2 Answers2