Filter from key value objects in reactjs

Question

I am creating searchbar to filter key value data objects. I am getting filter is not a function error while doing search. Is there any other function to filter in key value pair objects ?

Data :-

{
  meta_city : {
    label: "City"
    values: (5) ["DL", "KA", "GJ", "MH", "UP"]
   },
  meta_country : {
    label: "Country"
    values: (5) ["IN", "US", "CA"]
   }
}

Handle search (filterData data is local state) :-

const handleSearchFilter = (event) => {
    const searchWord = event.target.value;
    const newFilter = Object.keys(filterData).map((key) => {
      filterData[key].filter((value) => {
        return value.includes(searchWord);
      });
    });
    setFilterData(newFilter);
  };

<div className="mp-input-field-container">
     <input
       className="mp-input"
       placeholder="Search"
       onChange={handleSearchFilter}                    
     />
</div>

Are you trying to filter according to the values field of item in the object? — gilamran
– gilamran, Commented Oct 18, 2021 at 13:35

gilamran · Accepted Answer · 2021-10-18 13:37:54Z

1

You should use reduce like this:

const handleSearchFilter = (event) => {
  const searchWord = event.target.value;
  const newFilter = Object.keys(filterData).reduce((result, key) => {
    if (filterData[key].values.includes(searchWord)) {
      result.push(filterData[key]);
    };
    return result;
  }, []);
  setFilterData(newFilter);
};

In this example I'm returning an array result. you can return an object if you want.

edited Oct 18, 2021 at 13:37

answered Oct 18, 2021 at 13:18

gilamran

7,3144 gold badges33 silver badges54 bronze badges

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

2 Comments

Gurupal singh Over a year ago

it is giving this error > TypeError: Cannot read property 'includes' of undefined

fredericrous Over a year ago

I think reduce is overkill in this situation. Add a "?." before "includes" to handle the case there is an entry without the "values" property. see my answer

fredericrous · Accepted Answer · 2021-10-18 13:45:20Z

0

Filter does not exist on a string type. When filterData[key] is called, key has a value of label. filterData["label"] returns a string "City".

try

const searchWord = (word) => Object.values(filterData).filter((data) => data.values?.includes(word));

const handleSearchFilter = (event) => {
  const word = event.target.value;
  const [newFilter] = searchWord(word)
  setFilterData(newFilter);
}

searchWord returns if you search "DL"

[
  {
    label: 'City',
    values: [ 'DL', 'KA', 'GJ', 'MH', 'UP' ]
  }
]

Was that the result you were looking for?

Here is the code snippet to prove the solution works:

var filterData = {
  meta_city : {
    label: "City",
    values: ["DL", "KA", "GJ", "MH", "UP"]
   },
  meta_country : {
    label: "Country",
    values: ["IN", "US", "CA"]
   }
}


const searchWord = (word) => Object.values(filterData).filter((data) => data.values.includes(word));


console.log(searchWord("DL"))

edited Oct 18, 2021 at 13:45

answered Oct 18, 2021 at 13:31

fredericrous

3,1081 gold badge27 silver badges28 bronze badges

9 Comments

Gurupal singh Over a year ago

how can i update the state after this ? I mean filterData is an local state

fredericrous Over a year ago

I updated my answer, sorry I thought that was obvious

gilamran Over a year ago

Your solution returns an array of words, not results...

Gurupal singh Over a year ago

yes .. it returns nothing ...

Gurupal singh Over a year ago

@fredericrous TypeError: Cannot convert undefined or null to object

|

Collectives™ on Stack Overflow

Filter from key value objects in reactjs

2 Answers 2

2 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related