Filtering through nested JSON values in Javascript (React)

Question

I am having a nested json file fetched through api which is kind of a nested object. An example of the json file is as follows:

{ "trees":{ "name":"a", "age":"9", "height":"10", "location":"park" }, "cars":{ "name":"b", "age":"30", "height":"10", "location":"park" }, "bikes":{ "name":"c", "age":"110", "height":"10", "location":"park" },.........................

I am building a search functionality wherein whatever the user searches for can be filtered in name and location of the above json file and send to child component (eg. searchTerm =c then send name age height location where there is c in name or location)

This is how I mapped through the same json is completely different component which was working fine.

{ Object.entries(props.data).map( ([key, { ...e }]) => { return (<tr> <SingleData key={key} {...e} /> </tr> ) } )} const searchHandler = (string) => { setsearchTerm(string) if (searchTerm!==""){ const filtered= Object.entries(Data).filter( ([key, { ...e }]) => { return ( console.log(Object.values(name).toLowerCase().includes(searchTerm.toLowerCase())) ) } ) setSearchResults(filtered) } else{ setSearchResults(Data) } }

Here I tried to send data as setSearchResults to child component after filtering. searchTerm is in useState which is getting updated with the search string of user.

But this method is giving me nothing. Please hele me try to figure out how to make this work

your filter function should return a boolean indicating whether or not to keep it in the list. You return the result of a console.log, which is falsey. — windowsill
– windowsill, Commented Dec 14, 2021 at 6:18
Yes I did console.log to find out what was happening and yes I was getting false which I didnt know why. Can you help me figure out the correct way — VATSAL JAIN
– VATSAL JAIN, Commented Dec 14, 2021 at 6:20
Don't call console.log in a return expression. So... eh... just don't? Are you saying you don't understand what windowsill is saying? I mean: console.log always returns undefined... so you return undefined. Since that is not what you want, ... don't do it. Put your caret on the c of console.log and press the Del key until it is gone. — trincot
– trincot, Commented Dec 14, 2021 at 6:40

Saeed Shamloo · Accepted Answer · 2021-12-14 06:35:17Z

If you want to have filtered item as nested array include [key, obj] you can do it like this:

const data = { "trees": { "name": "a", "age": "9", "height": "10", "location": "park" }, "cars": { "name": "b", "age": "30", "height": "10", "location": "park" }, "bikes": { "name": "c", "age": "110", "height": "10", "location": "park" } } const searchTerm = 'C'; const filtered = Object.entries(data).filter( ([key, obj]) =>obj.name.toLowerCase().includes( searchTerm.toLowerCase() ) ); console.log(filtered)

if you want to have just filtered objects in the filtered variable, you can map over your result after you finished your search like this:

const filtered = Object.entries(data).filter( ([key, obj]) =>obj.name.toLowerCase().includes( searchTerm.toLowerCase() ) ).map(item => item[1]);

Ok so if I use mapping then I can send filtered as the filtered values to my child component?
Yes, you can do wathever you want with filtered variables, without map your result would be like this: [ ['bikes', {name: 'c', ...} ] ]. with map your result would be like this: [ {name: 'c', ...} ]

Collectives™ on Stack Overflow

Filtering through nested JSON values in Javascript (React)

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related