CODEWITHSUNDEEP
arrayscheckboxvue.jsvuejs2
wbdlc
wbdlc

Reputation: 1089

VueJS - filter items from checkbox selection

I am looking to refine my data output by the category names.

How to filter the output items by the cat_array? Whilst preserving my text search filter?

    {
    "id": 1,
    "title": "Title one",
    "category_data": {
        "2": "Team",
        "7": "Queries"
    }
},

I had tested using this:

return  vm.info.filter(item => this.cat_array.includes(item.category_id))

Codepen example: https://codepen.io/anon/pen/XxNORW?editors=1011

Thanks

Upvotes: 0

Views: 288

Answers (1)

akuiper
akuiper

Reputation: 214957

One approach - (Didn't take care of the All logic):

this.info.filter(
  item => Object.values(item.category_data).some(
    cat => this.cat_array.includes(cat))
)

Demo:

var info = [
    {
        "id": 1,
        "title": "Title one",
        "category_data": {
            "2": "Team",
            "7": "Queries"
        }
    },
    {
        "id": 2,
        "title": "Title two",
        "category_data": {
            "2": "Team",
            "7": "Queries"
        }
    },
    {
        "id": 3,
        "title": "Title three",
        "category_data": {
            "2": "Team",
            "7": "Queries"
        }
    },
    {
        "id": 4,
        "title": "Title four",
        "category_data": {
            "2": "Team",
            "7": "Queries"
        }
    },
    {
        "id": 5,
        "title": "Title five",
        "category_data": {
            "2": "Team",
            "6": "Questions",
            "7": "Queries"
        }
    },
    {
        "id": 6,
        "title": "Title six",
        "category_data": {
            "2": "Team",
            "6": "Questions",
            "7": "Queries",
            "12": "Fax",
        }
    }
]

var cat_array = ["Questions"]

console.log(
  info.filter(
    item => Object.values(item.category_data).some(
      cat => cat_array.includes(cat)
    )
  )
)

Upvotes: 2

Related Questions