How do I filter the data based on search input from array of objects in React, ES6

Question

I have the JSON data pattern coming from API in the below way. I was able to filter the data with body key. I'm trying to implement the search functionality which should search all the array of objects irrespective of key based on user input. Could someone please guide how to achieve this. I tried using nested for loop to get the individual key but not luck.

[
  {
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "[email protected]",
    "body": "laudantium enim quasi est quidem magnccusantium"
  },
  {
    "postId": 1,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "[email protected]",
    "body": "est natus enim nihil est dolore is et"
  }
  ...
]

Key based search logic that I'm currently using

const filteredData = data.filter(item =>
      item.body.includes(searchTerm.value)
    );
    this.setState({ filteredData: filteredData });

I created a working example using Sandbox. Could anyone please guide how to achieve the Search results from entire array of Objects?

It's better to have a dropdown alongside, let user the key by which they want to search and then search for that key for the particular value — Code Maniac
– Code Maniac, Commented Oct 23, 2019 at 17:08
Ah I see. But, is there a way I can search the entire table ( array of objects ) irrespective of the key based on user entered input string? @CodeManiac — krsna
– krsna, Commented Oct 23, 2019 at 17:10
Yes you can, you need to search loop though all the entries and use some method if any of the value matches then you can return that element, — Code Maniac
– Code Maniac, Commented Oct 23, 2019 at 17:12
Try const filteredData = data.filter(item => Object.values(item).some(val => val.toString().includes(searchTerm.value))) — dchang
– dchang, Commented Oct 23, 2019 at 17:16
OMG! That was it man. Appreciate it! @David Can you post it as a answer so that I can accept it. — krsna
– krsna, Commented Oct 23, 2019 at 17:19

dchang · Accepted Answer · 2019-10-23 17:21:34Z

3

Try this:

const filteredData = data.filter(item => Object.values(item).some(val => val.toString().includes(searchTerm.value)));

answered Oct 23, 2019 at 17:21

dchang

2,02714 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

How do I filter the data based on search input from array of objects in React, ES6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related