VueJS - filter items from checkbox selection

Question

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

akuiper · Accepted Answer · 2018-10-09 15:50:08Z

2

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)
    )
  )
)

answered Oct 9, 2018 at 15:50

akuiper

216k33 gold badges362 silver badges379 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

wbdlc Over a year ago

Do you have a codepen for this, the filtering for this is not working as is. Thanks

wbdlc Over a year ago

Could you elaborate further on your answer? Many thanks.

akuiper Over a year ago

If you wanted to preserve the text search, I believe what you need is to combine the two criteria with && operator. Btw, I don't see why you have the All criteria there, it essentially just means no filter.

wbdlc Over a year ago

Thanks. I'm very new to Vue and require so hand holding I'm afraid. How would I use the && operator within my existing filter? ` return vm.info.filter(item => { return item.title.toLowerCase().indexOf(this.numbers_search_term.toLowerCase()) > -1 })`

akuiper Over a year ago

this.info.filter(item => Object.values(item.category_data).some(cat => cat_array.includes(cat)) &&  item.title.toLowerCase().indexOf(this.numbers_search_term.toLowerCase()) > -1)

Possibly -

|

Collectives™ on Stack Overflow

VueJS - filter items from checkbox selection

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related