Javascript - How do I map an array of objects to a datatable with column names?

Question

I have some data like this, an array of objects:

source = [{
  day: 1,
  deliveries: 16,
  hours: 9
}, {
  day: 2,
  deliveries: 19,
  hours: 11
}]

Which I would like to have in this format:

source = (['day', 'deliveries', 'hours'],
          ['1', '16', '9'],
          ['2', '19', '11'])

Sort of like a table. I read up a little on mapping arrays and tried this:

const datatable = source.map(d => Array.from(Object.keys(d)))
console.log(datatable)
// [["day", "deliveries", "hours"], ["day", "deliveries", "hours"]]

And this:

const datatable = source.map(d => Array.from(Object.values(d)))
console.log(datatable)
// [[1, 16, 9], [2, 19, 11]]

Each gives me half of what I want. I tried this:

let datatable = source.map(d => Array.from(Object.keys(d)))
let datatable2 = source.map(d => Array.from(Object.values(d)))

datatable = datatable[1]
let combined = datatable.concat(datatable2);
console.log(combined)
///["day", "deliveries", "hours", [1, 16, 9], [2, 19, 11]]

But even here the column names are not being combined correctly, and this way seems a little messy. How do I have the keys be on top (like column names would be) and the values following them?

What structure should the resulting datatable be? An array? (What you've shown for the "source" result, while syntactically valid, will result in source just being ['2', '19', '11'].) — T.J. Crowder
– T.J. Crowder, Commented Oct 8, 2021 at 10:18
@T.J.Crowder do you mean the resultant source? I am not sure what the kind of structure is called but I'm trying to transform my object from the original to what is specified here. Edit: I just read your answer too! — Aman
– Aman, Commented Oct 8, 2021 at 10:21
Sorry, yes, I meant what structure do you want for datatable. — T.J. Crowder
– T.J. Crowder, Commented Oct 8, 2021 at 10:22

T.J. Crowder · Accepted Answer · 2021-10-08 10:20:34Z

Assuming you want source to be an array of arrays (common for table-like structures), get the keys once, then add each row array mapping the object's properties to the key for that index:

const keys = Object.keys(source[0]);
const result = [keys, ...source.map(obj => keys.map(key => obj[key]))];

Live Example:

const source = [{
  day: 1,
  deliveries: 16,
  hours: 9
}, {
  day: 2,
  deliveries: 19,
  hours: 11
}];

const keys = Object.keys(source[0]);
const result = [keys, ...source.map(obj => keys.map(key => obj[key]))];
console.log(result);

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

Note that this assumes a couple of things:

The source array always has at least one object in it.
The objects in the source array all have the same set of properties.
You want the keys to be in the order in which they appear in the first object in the array. (JavaScript object properties do have a defined order now, but using that order is almost never a good idea, so you might want to do some kind of sort operation on keys.)

Tushar Shahi · Accepted Answer · 2021-10-08 10:20:57Z

1

You are almost there. Just use [0] to get the first item to get only keys. And then combine the array using ....

let source = [{
  day: 1,
  deliveries: 16,
  hours: 9
}, {
  day: 2,
  deliveries: 19,
  hours: 11
}]

let ansArray = Object.keys(source[0]);
let datatable = source.map(d => Array.from(Object.values(d)))

let combined = [ansArray,...datatable];
console.log(combined);

answered Oct 8, 2021 at 10:20

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Comments

Tuan Dao · Accepted Answer · 2021-10-08 10:27:36Z

1

Array.from(Object.keys(d)) and Array.from(Object.values(d)) will return the wrong data if the order of property is wrong.

const source = [{
  day: 1,
  deliveries: 16,
  hours: 9
}, {
  day: 2,
  deliveries: 19,
  hours: 11
}]

const datatable = source.reduce((acc, item, index) => {
   if (index == 0) {
     acc.push(Object.keys(item));
   }
   const newRow = acc[0].reduce((rowAcc, prop) => {
     rowAcc.push(item[prop]);
     return rowAcc;
   }, []);
   
   acc.push(newRow);
  return acc;
}, [])

console.log(datatable);

edited Oct 8, 2021 at 10:27

answered Oct 8, 2021 at 10:21

Tuan Dao

2,8151 gold badge14 silver badges21 bronze badges

Collectives™ on Stack Overflow

Javascript - How do I map an array of objects to a datatable with column names?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related