How to construct multiple dictionaries to array in react native - arrays

Question

I am trying to show Expand/Collapse Flatlist data in react-native.
It is like single parent with multiple childs. So, If user tap on the cell, I have to show multiple rows for that expand/collapse.
But, I am getting data from server like following.
[{
code: '1212',
name: 'Bajaj Model 1',
url: 'Some url',
category: 'Bike'
},
{
code: '1213',
name: 'Bajaj Model 2',
url: 'other url',
category: 'Bike'
},
{
code: '1454',
name: 'BMW Model 1',
url: 'Some url',
category: 'Car'
},
{
code: '1454',
name: 'BMW Model 2',
url: 'Some url',
category: 'Car'
}
]
So, All the Bike data, I have to show one place like Parent and child.
For that I have done filter.
const fundsFilterData = mapValues(groupBy(response, 'category'),
fundslist => fundslist.map(item => omit(item, 'category')));
And I am getting like following.
{
'Bike': [{
code: '1212',
name: 'Bajaj Model 1',
url: 'Some url'
},
{
code: '1213',
name: 'Bajaj Model 2',
url: 'other url'
},
],
'Car': [{
code: '1454',
name: 'BMW Model 1',
url: 'Some url'
},
{
code: '1454',
name: 'BMW Model 2',
url: 'other url'
},
]
}
But, I want to make it as array along with some pre added keys like following.
[{
'Title': 'Bike',
'Values': [{
'code': '1212',
'name': 'Bajaj Model 1',
'url': 'Some url'
},
{
'code': '1454',
'name': 'Bajaj Model 2',
'url': 'other url'
}
]
},
{
'Title': 'Car',
'Values': [{
'code": '
1454 ',
'name": '
BMW Model 1 ',
'url": '
Some url '
},
{
'code': '1454',
'name': 'BMW Model 2',
'url': 'Some url'
}
]
}
}
So that I can show Titles in headers and once user tap on row, I can show child's data as expanded.
Any suggestions?

Answer 1

Use _.map() which returns an array, and not _.mapValues(). In the _.map() get the Title (the key) from the 2nd param. Use it and the values (after _.omit()) to construct an object for each group.
const { map, groupBy, omit } = _;
const response = [{"code":"1212","name":"Bajaj Model 1","url":"Some url","category":"Bike"},{"code":"1213","name":"Bajaj Model 2","url":"other url","category":"Bike"},{"code":"1454","name":"BMW Model 1","url":"Some url","category":"Car"},{"code":"1454","name":"BMW Model 2","url":"Some url","category":"Car"}];
const fundsFilterData = map(
groupBy(response, 'category'),
(list, Title) => ({
Title,
Values: list.map(item => omit(item, 'category'))
})
);
console.log(fundsFilterData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>