DEV Community

Subho Karmakar
Subho Karmakar

Posted on

2 1

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)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay