How to filter from array elements in Vue JS

Question

I'm building a small application in Vue Js 2.0 where I'm trying to filter elements which is in array format, I'm to format if the element is single string something like this:

const search = this.search_by_name.toLowerCase()
const searchContact = this.search_by_contact.toLowerCase()
return this.meetings
    .map(i => ({
        id: i.interaction.id,
        client_name: i.client.name,
        contactName: i.contacts_association,
    }))
    .filter((item) =>
        item.client_name.toLowerCase().includes(search)
    )

I want to have item.contactName.first_name.toLowerCase().includes(searchContact) But In this case contacts_association is in array format which throws back an error:

TypeError: item.contactName.toLowerCase is not a function

My contacts_association is in following format:

"contacts_association":[
    {
        "id":431,
        "first_name":"Nikunj",
        "last_name":"Doshi",
        "address":"602-603, 6th Floor, Dalamal House,Nariman Point",
        "city":"Mumbai",
        "state":"Maharashtra",
        "country":"India",
        "pivot":
            {
                "interaction_id":139,
                "contact_id":431,
                "company_id":160,
                "created_at":"2017-09-23 16:42:56",
                "updated_at":"2017-09-23 16:42:56"
            },
        "company":[
            {
                "id":160,
                "name":"Bay Capital Investment Managers Pvt Ltd",
                "address":"602-603, 6th Floor, Dalamal House,Nariman Point",
                "city":"Mumbai",
                "state":"Maharashtra",
                "country":"India",
                "type":"Investor",
                "sub_type":"FII",
                "is_client":0,
            }
        ]
    }
    {
        "id":431,
        "first_name":"Vikash",
        "last_name":"Kumar",
        "address":"602-603, 6th Floor, Dalamal House,Nariman Point",
        "city":"Mumbai",
        "state":"Maharashtra",
        "country":"India",
        "pivot":
            {
                "interaction_id":139,
                "contact_id":431,
                "company_id":160,
                "created_at":"2017-09-23 16:42:56",
                "updated_at":"2017-09-23 16:42:56"
            },
        "company":[
            {
                "id":160,
                "name":"Investment Managers Pvt Ltd",
                "address":"Nariman Point",
                "city":"Mumbai",
                "state":"Maharashtra",
                "country":"India",
                "type":"Investor",
                "sub_type":"FII",
                "is_client":0,
            }
        ]
    }
]

I want to have filters with first_name and last_name, help me out in this.

Answer 1

So basically you're saying that contactName is an array of contacts instead of just one, and you want to match all meetings that have at least one contact in contactName with name matching searchContact?

Try this (untested):

.filter(item =>
  item.client_name.toLowerCase().includes(search) &&
  item.contactName.some(c =>
    (c.first_name + ' ' + c.last_name).toLowerCase().includes(searchContact)
  )
)

Also I should mention it's confusing to mix camelCase and snake_case for contactName and client_name, respectively. Pick one.