Convert array of objects to another structured array of objects

Question

I am pretty new to JS and React, and can't convert two things as following:

myData array of objects:

[ 
 0: {"last_name: "somebody last name", "name": "somebody name",.....},
 2: {"last_name: "somebody last name", "name": "somebody name",...},
 3: ....
]

I need convert them with:

let xlsxDataSource = myData.map(item => {
 return {
 
 value: item.last_name,
 value: item.name
 };
 });

to the array of objects where the keys are all is named value:

[
 0: {"value: "somebody last name"},
 2: {"value: "somebody name"},
 3: {"value: "somebody middle_name"},
 4: {"value: "somebody time entrance"},
 5: ...
]

This is required by react library which converts this array of objects to xlsx file.

My code rewriting the prev value and gives only:

[
 0: {"value: "somebody name"},
 2: {"value: "somebody name"},
 3: {"value: "somebody name"},
 4: {"value: "somebody name"},
 5: ...
]

How can I do these transofmations properly. Any ideas please?

Upd.

Such structure is required by library:

const multiDataSet = [
 {
 columns: [
 {title: "Headings", width: {wpx: 80}},//pixels width 
 {title: "Text Style", width: {wch: 40}},//char width 
 {title: "Colors", width: {wpx: 90}},
 ],
 data: [
 [
 {value: "H1", style: {font: {sz: "24", bold: true}}},
 {value: "Bold", style: {font: {bold: true}}},
 {value: "Red", style: {fill: {patternType: "solid", fgColor: {rgb: "FFFF0000"}}}},
 ],
 [
 {value: "H2", style: {font: {sz: "18", bold: true}}},
 {value: "underline", style: {font: {underline: true}}},
 {value: "Blue", style: {fill: {patternType: "solid", fgColor: {rgb: "FF0000FF"}}}},
 ],
 [
 {value: "H3", style: {font: {sz: "14", bold: true}}},
 {value: "italic", style: {font: {italic: true}}},
 {value: "Green", style: {fill: {patternType: "solid", fgColor: {rgb: "FF00FF00"}}}},
 ],
 [
 {value: "H4", style: {font: {sz: "12", bold: true}}},
 {value: "strike", style: {font: {strike: true}}},
 {value: "Orange", style: {fill: {patternType: "solid", fgColor: {rgb: "FFF86B00"}}}},
 ],
 [
 {value: "H5", style: {font: {sz: "10.5", bold: true}}},
 {value: "outline", style: {font: {outline: true}}},
 {value: "Yellow", style: {fill: {patternType: "solid", fgColor: {rgb: "FFFFFF00"}}}},
 ],
 [
 {value: "H6", style: {font: {sz: "7.5", bold: true}}},
 {value: "shadow", style: {font: {shadow: true}}},
 {value: "Light Blue", style: {fill: {patternType: "solid", fgColor: {rgb: "FFCCEEFF"}}}}
 ]
 ]
 }
];

And the one below is myData from console.log:

(25) [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}]
0: {last_name: "...", first_name: "...", middle_name: "...", monh: "2021年02月01日 00:00:00", name: "OITIB", ...}
1: {last_name: "...", first_name: "... ", middle_name: "...", monh: "2021年02月01日 00:00:00", name: "OITIB", ...}
2: {last_name: "...", first_name: "...", middle_name: "...", monh: "2021年01月31日 00:00:00", name: "OITIB", ...}
3: {last_name: "...", first_name: "...", middle_name: "...", monh: "2021年01月29日 00:00:00", name: "OITIB", ...}
....
length: 25
__proto__: Array(0)

• codemonkey: It's not entirely clear what pattern you follow to convert your original array of objects into the desired one. Can you be more specific? Can you show just one full element of the original array and show what you want it to look like?
• noszone: Added update to the question.

Answer 1

You can use Array.prototype.flatMap for this. It applies a callback where you return an array and all of the returned arrays are concatenated together (flattened).

In our callback, we get all of the values for each object as an array and then map them to objects with property value.

const myData = [ 
 {last_name: "somebody last name", name: "somebody name"},
 {last_name: "somebody last name", name: "somebody name"},
]
const res = myData.flatMap(
 obj => Object.values(obj).map(
 value => ({value})
 )
);
console.log(res);

Edit: It turns out that we don't actually want to flatten the data! If each element is a row of your dataset, then we want to return an array of arrays. So everything in the above code stays the same except replace .flatMap with .map.

Let's add in the columns too, which we can get from the first element (will cause an error if the array is empty).

const myData = [ 
 {last_name: "somebody last name", name: "somebody name"},
 {last_name: "somebody last name", name: "somebody name"},
]
const multiDataSet = [
 {
 columns: Object.keys(myData[0]).map( 
 key => ({title: key})
 ),
 data: myData.map(
 obj => Object.values(obj).map(
 value => ({value})
 )
 ) 
 }
]
console.log(multiDataSet);

• codemonkey: Good answer, but it's frankly unclear this is precisely what they wanted.
• noszone: Sorry, trying my best to show it's as clear as possible, still novice in arrays and objects.
• Linda Paiste: @codemonkey yeah it works perfectly for their dummy example but now that they've posted the example structure output it's clear that there is more than just value. But I don't know what the input structure is so I don't know where we get the style!
• Linda Paiste: @noszone I think maybe you actually want a regular .map not .flatMap - everything else the same.
• noszone: @LindaPaiste, your code is working like a charm! I bashed my head already 3-4 days onto this question. I've used .map. Thank you so much for help!