Converting a dataset into an array of objects using Javascript or Typescript

Question

Converting a dataset into an array of objects using Javascript or Typescript

I am working with an input object consisting of two arrays.

payload 

columns:["col1", "col2","col3"],
data: ["col1value1","col2value1" , "col1value3"] ,
      ["col1value2","col2value2" , "col1value2"]

My goal is to convert these two arrays into objects as shown below: output = [];

[
  { col1: 'col1value1', col2: 'col2value1', col3: col1value3},
  { col1: 'col1value2', col2: 'col2value2', col3: col1value2}
]

I have been attempting to achieve this using reduce or other methods, but I am struggling. Currently, I am hard coding the index of columns in the data array. Is there a better and faster way to accomplish this without hard coding the column names?

This is how I am currently approaching it:

const indexofCol1= this.payload.columns.indexOf["col1"]

Then I use that index to map through the data array to retrieve all the values - which I know is not ideal.

javascript arrays typescript ecmascript-6

Answer 1

Answer №1

To transform your data arrays into objects, you can utilize a combination of .map() along with Object.fromEntries(). Begin by applying the .map() function to your data arrays. Within each inner array (referred to as row), construct an object using Object.fromEntries(). This method requires an array consisting of [[key, value], ...] pairs. Create this array by mapping your cols array, where each key corresponds to a value in cols, and each value represents the respective item in your current row array.

Below is an illustration:

const cols = ["col1", "col2", "col3"];
const data = [["col1value1", "col2value1", "col1value3"], ["col1value2", "col2value2", "col1value2"]];

const res = data.map(row => Object.fromEntries(
  cols.map((key, i) => [key, row[i]])
));

console.log(res);

.as-console-wrapper { max-height: 100% !important;} /* ignore */

If your environment does not support Object.fromEntries(), a more compatible alternative involves employing Object.assign() along with the spread syntax:

const cols = ["col1", "col2", "col3"];
const data = [["col1value1", "col2value1", "col1value3"], ["col1value2", "col2value2", "col1value2"]];

const res = data.map(row => Object.assign({},
  ...cols.map((key, i) => ({[key]: row[i]}))
));

console.log(res);

.as-console-wrapper { max-height: 100% !important;} /* ignore */

Answer 2

To transform your data arrays into objects, you can utilize a combination of .map() along with Object.fromEntries(). Begin by applying the .map() function to your data arrays. Within each inner array (referred to as row), construct an object using Object.fromEntries(). This method requires an array consisting of [[key, value], ...] pairs. Create this array by mapping your cols array, where each key corresponds to a value in cols, and each value represents the respective item in your current row array.

Below is an illustration:

const cols = ["col1", "col2", "col3"];
const data = [["col1value1", "col2value1", "col1value3"], ["col1value2", "col2value2", "col1value2"]];

const res = data.map(row => Object.fromEntries(
  cols.map((key, i) => [key, row[i]])
));

console.log(res);

.as-console-wrapper { max-height: 100% !important;} /* ignore */

If your environment does not support Object.fromEntries(), a more compatible alternative involves employing Object.assign() along with the spread syntax:

const cols = ["col1", "col2", "col3"];
const data = [["col1value1", "col2value1", "col1value3"], ["col1value2", "col2value2", "col1value2"]];

const res = data.map(row => Object.assign({},
  ...cols.map((key, i) => ({[key]: row[i]}))
));

console.log(res);

.as-console-wrapper { max-height: 100% !important;} /* ignore */

Converting a dataset into an array of objects using Javascript or Typescript

Answer №1

Similar questions

The process of transferring information from a JSON API to TypeScript models

The div element nested within the button is not visible

Sleek Carousel failing to display in Bootstrap5 Tab panel

Creating a split button can be enhanced by incorporating a disabled button with a tooltip feature

Sorting through items within a container object

Confirmation Dialog with FancyBox for Deletion

Tips for removing markers from personal Google Maps

After compiling, global variables in Vue.js 2 + Typescript may lose their values

Transfer a table row between tables - AngularJS

Enhance Your ASP.NET Website with Dynamic Link Styles

Is it possible to utilize waxjs for retrieving data on NFTs within the Wax Cloud Wallet?

Firefox compatibility issue caused by jQuery's appendTo function disrupting hyperlink functionality

Tips for generating documentation using markdown within the docs directory on GitHub with the help of JavaScript

Using 'this' to access state in the Vuex Store

Issue with Highcharts: Overlapping yAxis labels when displaying multiple series data

Why isn't the Angular directive resolving the dynamic button text variable?

provide the key and id to a node.js module

Triggering an event when selecting options in dropdown menus on Firefox

Exploring the power of dynamic templates in Angular 4

Understanding np.argmax() in Python: a comprehensive guide