Table filters in Vuejs

Question

I'm building a small application in vuejs where I'm having a filter something like this:

tableFilter: function () {
    const searchTerm = this.search.toLowerCase();
    const searchByType = this.search_by_tag.toLowerCase();
    if(this.contactStore.contactList)
    {
        return this.contactStore.contactList.data.filter((item) =>
            (item.first_name.toLowerCase().includes(searchTerm)
                || (item.last_name !==null && item.last_name.toLowerCase().includes(searchTerm))
                || (item.company.name !==null && item.company.name.toLowerCase().includes(searchTerm))
                || item.email.toLowerCase().includes(searchTerm)
                || (item.address !== null && item.address.toLowerCase().includes(searchTerm))
                || (item.city !== null && item.city.toLowerCase().includes(searchTerm))
                || (item.mobile !==null && item.mobile.toLowerCase().includes(searchTerm)))
        && ((item.profile !==null && item.profile.toLowerCase().includes(searchByType))
            || (item.company.type !== null && item.company.type.toLowerCase().includes(searchByType))
            || (item.company.sub_type !== null && item.company.sub_type.toLowerCase().includes(searchByType))));
    }
},

In this I've a property called item.company which can be null, so while implementing

(item.company.type !== null && item.company.type.toLowerCase().includes(searchByType))

it is throwing error:

Error in render function: "TypeError: Cannot read property 'type' of null"

I'm looking for a solution where I can have if-else to find out whether the item is having company or not, if property is available then it can do the filters respectively.

Thanks

Faly · Accepted Answer · 2017-09-27 07:36:49Z

2

If you just want to fix the error:

|| (item.company && item.company.type !== null && item.company.type.toLowerCase().includes(searchByType))

But if you want to not filter by company if it is null:

|| (item.company ? && item.company.type !== null && item.company.type.toLowerCase().includes(searchByType) : true)

edited Sep 27, 2017 at 7:36

answered Sep 27, 2017 at 7:31

Faly

13.4k2 gold badges21 silver badges39 bronze badges

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

3 Comments

Nitish Kumar Over a year ago

I thought it can be something like this: (item.company !== null && item.company.type !== null && item.company.type.toLowerCase().includes(searchByType))

Faly Over a year ago

null is falsy in javascript so you can just do (item.company && ...)

Nitish Kumar Over a year ago

Thanks, it helped.. :)

Collectives™ on Stack Overflow

Table filters in Vuejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related