Assume we have the following problem:
sort an array of objects
do it dynamically based on different properties values
render this in browser usin...
For further actions, you may consider blocking this person and/or reporting abuse
Hello, thank you for this great tutorial. Could you help with sorting nested object. E.g location has nested fields city and town and lets say I wanted to filter by town
const bands = [
{
name: 'Nightwish',
albums: 9,
members: 6,
formed_in: 1996,
location: {
city: "Berlin",
town: "Cologne"
}
},
..............................................
];
Hi, Muyembell! Thank you for your feedback!
As for your question, you can sort array of objects by nested property this way (if you need to compare strings):
array.sort((a,b) => a.location.city.localeCompare(b.location.city));
Please, check the full updated code of the tutorial example with nested property sorting here - branch nested-sorting.
Thank you 🙌. Worked like a charm
is it possible to have this sort as a component? so one can use on multiple pages? thanks
yes, of course, it's totally possible. Just pass initial data and and sort type as a props to this component. The exact implementation depends on your use case.
It was frustrating because list was not rendered but your post resolved my issue. [...bands] works perfect. Thanks so much
Hey thank you it worked really well
thanks a lot men , this code very very helped me for sort options in my project <3
Thank u, it was very helpful 👍
codesandbox link?
Nope, only GitHub - github.com/KaterinaLupacheva/react...
You are awesome man
Very very very thank you! I can't sleep in 3 days for that problem! Awesome ! Thank you again
I know the feeling when you can't sleep due to some coding problem bothering you:) And you are very welcome!!!
github.com/KaterinaLupacheva/react...
Please check the answer - github.com/KaterinaLupacheva/react...
Why not map through the state "data" instead of "bands"?
Actually it mapped through the state data, please check the full code in the repo. Map through "bands" happens only on the "early stage" of the tutorial.