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)