Reputation: 19
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.
Upvotes: 0
Views: 1299
Reputation: 1153
Try 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,
},
],
},
];
const res = [];
tableData.map((i) => {
let obj;
i.detailList.forEach((j) => {
obj = {
...obj,
[j.title]: j.value,
};
});
res.push(obj);
});
Upvotes: 0
Reputation: 3691
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-copyUpvotes: 1
Reputation: 782785
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);
Upvotes: 2
Reputation: 258
const res = tableData.map(({ display, detailList}) => {
const obj = {
title: display,
}
detailList.forEach(el => obj[el.title] = el.value);
return obj;
})
Upvotes: 1