How to use React-widget Dropdownlist with groupby attribute - html

Question

I need to use react-widgets dropdownlist with groupby attribute.
A typical example of this would be;
<Multiselect
data=[{name:'Dan' lastName:'Black'}, {name:'Man' lastName:'Black'}]
textField='name'
groupBy='lastName'
/>
But the data array i have of is of a completely different structure. like;
[
{
name:'test one',
objects: [{key:'my key', value:'my value'},
{key:'my key1', value:'my value1'}
{key:'my key2', value:'my value2'}]
},
{
name:'test two',
objects: [{key:'my key', value:'my value'},
{key:'my key1', value:'my value1'}
{key:'my key2', value:'my value2'}]
}
]
And i need the 'key' to be the value displayed in the list and groupby on 'name'.
Is this possible to achieve or just completely stupid and i have to restructure it totally?
Each objects array is honestly 100 or more objects long.. so i prefer not to restructure it again due to performance issue.
Thanks in advance, All ideas are welcome!
UPDATE:
<DropdownList
data = {
[{
repoName: 'google repository',
objects: [
{
key: 'mykey',
method: 'my meth',
value: 'my val'
},
{
key: 'mykey2',
method: 'my meth2',
value: 'my val2'
}]
}]}
textField='objects.key'
placeholder={placeholder}
groupBy='repoName'
/>
Gives something like;
google repository
[Object Object]
How could iterate that object array to avoid this?

Answer 1

According to my understanding, what you can do is create a different structure for data using your existing one.
const data = [{
name: 'test one',
objects: [{
key: 'my key',
value: 'my value'
}, {
key: 'my key1',
value: 'my value1'
} {
key: 'my key2',
value: 'my value2'
}]
}, {
name: 'test two',
objects: [{
key: 'my key',
value: 'my value'
}, {
key: 'my key1',
value: 'my value1'
} {
key: 'my key2',
value: 'my value2'
}]
}]
const newData = []
data.forEach((element) => {
const name = element.name
if (element.objects && element.object.length) {
element.objects.forEach((keyValueData) => {
newData.push({
name,
key: keyValueData.key,
value: keyValueData.value,
})
})
}
})
< Multiselect
data = {
newData
}
textField = 'name'
groupBy = 'key' / >
This way, it should solve your issue.Mind brackets not tested the code