I have a list of objects like so
[
{ id: 0, color: 'yellow', fruit: 'banana', },
{ id: 1, color: 'yellow', fruit: 'lemon', },
{ id: 2, color: 'green', fruit: 'lime', },
{ id: 3, color: 'green', fruit: 'grape', },
{ id: 4, color: 'green', fruit: 'avocado', },
{ id: 5, color: 'red', fruit: 'apple', },
{ id: 6, color: 'red', fruit: 'cherry', },
{ id: 7, color: 'red', fruit: 'strawberry', },
{ id: 8, color: 'orange', fruit: 'orange', },
...
]
I want two material-ui autocompletes, one on color, the other on fruit.
But the first, I want to have only unique values for color.
Ie, my autocomplete options would include “all” of the values in the json object but it’d only show the unique values for “color”.
Ie, it’d only show ['yellow', 'green', 'red', 'orange'] for options, but behind the scenes, all of the options would be available.
Then in the second autocomplete would be all my fruit. Because they’re all unique, they would all appear. But the two autocompletes would share the same “options” (being the array above).
Then for their values, when I pick “yellow” in the first autocomplete, my “selected” would be (from the above array)
[
{ id: 0, color: 'yellow', fruit: 'banana', },
{ id: 1, color: 'yellow', fruit: 'lemon', },
]
And in my first autocomplete would be only the value “yellow” and in my second autocomplete would be the two values “banana” and “lemon”.
If I removed “lemon” from my second autocomplete, the first autocomplete would still have “yellow” but the second would only have “banana”. And my expected values would now be
[
{ id: 0, color: 'yellow', fruit: 'banana', },
]
Then, if I picked “green” from my first autocomplete, the values would then be
[
{ id: 0, color: 'yellow', fruit: 'banana', },
{ id: 2, color: 'green', fruit: 'lime', },
{ id: 3, color: 'green', fruit: 'grape', },
{ id: 4, color: 'green', fruit: 'avocado', },
]
What would be the most elegant way to go about accomplishing this?