How can I extract elements of an array inside an array to this array?
What I have is this:
const tableData = [
{
display: '2022-03',
column: 'data',
detailList: [
{
title: 'Quantity',
value: 1,
sourceId: null,
},
{
title: 'Price',
value: 2,
sourceId: null,
},
{
title: 'Weight',
value: 3,
sourceId: null,
},
{
title: 'income',
value: 4,
sourceId: null,
},
],
},
{
display: '2022-02',
column: 'data',
detailList: [
{
title: 'Quantity',
value: 7,
sourceId: null,
},
{
title: 'Price',
value: 6,
sourceId: null,
},
{
title: 'Weight',
value: 5,
sourceId: null,
},
{
title: 'income',
value: 4,
sourceId: null,
},
],
},
];
Now I want it to become this:
res = [
{
title: '2022-03',
'Quantity': '1',
'Price': '2',
'Weight': '3',
'income': '4',
},
{
title: '2022-02',
'Quantity': '7',
'Price': '6',
'Weight': '5',
'income': '4',
},
];
What's the best way to do it?
I'm trying to create a new array outside, and use two .map() to make it. But it looks not readable.
Can somebody give me a better solution that uses some ES6 features that makes it look more readable.
You should assign the result of map() directly to res, rather than calling push() inside the map.
You can use Object.fromEntries() to create the object from the inner map.
Destructuring and spread syntax can simplify the way you access the properties and build the resulting object.
const tableData = [{
display: '2022-03',
column: 'data',
detailList: [{
title: 'Quantity',
value: 1,
sourceId: null,
},
{
title: 'Price',
value: 2,
sourceId: null,
},
{
title: 'Weight',
value: 3,
sourceId: null,
},
{
title: 'income',
value: 4,
sourceId: null,
},
],
},
{
display: '2022-02',
column: 'data',
detailList: [{
title: 'Quantity',
value: 7,
sourceId: null,
},
{
title: 'Price',
value: 6,
sourceId: null,
},
{
title: 'Weight',
value: 5,
sourceId: null,
},
{
title: 'income',
value: 4,
sourceId: null,
},
],
},
];
let res = tableData.map(({
display,
detailList
}) => ({
title: display,
...Object.fromEntries(detailList.map(({
title,
value
}) => [title, value === null ? '-' : value]))
}));
console.log(res);const res = tableData.map(({ display, detailList}) => {
const obj = {
title: display,
}
detailList.forEach(el => obj[el.title] = el.value);
return obj;
})
This may be one possible solution to achieve the desired objective.
Code Snippet
const transformArray = arr => arr.map( // iterate using "map"
({display : title, detailList}) => ({ // de-structure, and rename
title,
...(
detailList.reduce( // iterate using "reduce"
(fin, {title, value}) => ({ // de-structure to access title, value
...fin,
[title]: value // may add "value" is null check here
}),
{} // the "fin" object is initialized to empty
)
)
})
);
const tableData = [
{
display: '2022-03',
column: 'data',
detailList: [
{
title: 'Quantity',
value: 1,
sourceId: null,
},
{
title: 'Price',
value: 2,
sourceId: null,
},
{
title: 'Weight',
value: 3,
sourceId: null,
},
{
title: 'income',
value: 4,
sourceId: null,
},
],
},
{
display: '2022-02',
column: 'data',
detailList: [
{
title: 'Quantity',
value: 7,
sourceId: null,
},
{
title: 'Price',
value: 6,
sourceId: null,
},
{
title: 'Weight',
value: 5,
sourceId: null,
},
{
title: 'income',
value: 4,
sourceId: null,
},
],
},
];
console.log(transformArray(tableData));.as-console-wrapper { max-height: 100% !important; top: 0; }Explanation
Inline comments explain the steps involved.
NOTES
This solution uses:
.reduce()display is renamed as title... spread to perform shallow-copy