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)

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);