DEV Community

Subho Karmakar
Subho Karmakar

Posted on

How to filter-search using a single search-bar component through all data types in an Array of Objects in React?

I called an array of objects and rendered the data in table format. I need to implement filter-search using a single search-bar component that can filter through all data types like - strings, contact numbers, email addresses, address and many more I'm fetching from the API.

[
{
id: 4,
accountDetail: {
accountStatus: "ACTIVE",
referralCode: "X1DNO8GW",
signUpRemarks: "",
adminRemarks: "",
accountStatusRemarks: "",
signUpTime: {
date: {
year: 2019,
month: 3,
day: 20
},
time: {
hour: 21,
minute: 32,
second: 2,
nano: 0
}
},
lastUpdationTime: {
date: {
year: 2019,
month: 3,
day: 20
},
time: {
hour: 21,
minute: 32,
second: 2,
nano: 0
}
}
},
name: "Narendra Modi",
phone: {
countryCode: "91",
number: 9876543210,
verified: true
},
emailId: {
address: "modi@gmail.com",
verified: false
},
address: {
street: "abc",
locality: {
id: 2,
name: "ABC",
pincode: 123021,
latLong: {
latitude: 0,
longitude: 0
},
city: {
id: 1683,
district: {
id: 55,
state: {
id: "IND-MH",
code: "MH",
name: "Maharshtra",
tin: 18,
type: "S"
},
code: "",
name: "Hinjewadi"
},
name: "Pune"
}
},
latLong: {
latitude: 0,
longitude: 0
}
},
password: "9876543210",
type: "RETAILER",
businessDetail: {
gstRegistered: false,
gstin: "",
businessName: "BJP Group",
CODLimit: 0,
creditLimit: 0
},
walletBalance: 0
},
{}
]

Here's the code I used to search through all the names in the array of objects,

let filteredData = this.state.users.filter(user => {
      return (
        user.name
          .toLowerCase()
          .indexOf(this.state.filterUsers.toLowerCase()) !== -1
      )
    })

I need to filter through data like contact number, name, business name, email id, address and every field in the objects. How do I do this?

Top comments (0)