Convert an array of objects to array of the objects' values

Question

I am trying to convert this array

let orders = [
  {  amount: '100', user: 'admin', date: 'March 6, 2019' },
  {  amount: '120', user: 'admin', date: 'March 6, 2019' },
  {  amount: '80', user: 'admin', date: 'March 7, 2019' },
  {  amount: '200', user: 'admin', date: 'March 7, 2019' },
];

to something like this

orders = [
  ['100', 'admin', 'March 6, 2019'],
  ['120', 'admin', 'March 6, 2019'],
  ['80', 'admin', 'March 7, 2019'],
  ['200', 'admin', 'March 7, 2019'],
];

and I have read that Objects.values() returns the values in an array, so I tried to iterate through the order array by using forEach() and using the Object.values on each item in the array.

let newOrders = orders.forEach(order => {
  return Object.values(order);
});

I don't know if what I am doing is right and I am new to Javascript. Please help me.

@reggaeguitar [It has too many limitations](https://stackoverflow.com/a/49420944/1048572) that you can trip you (like has happened here), [I like `for …of` much better](https://stackoverflow.com/a/50844413/1048572) and recommend it universally for beginners — Bergi, Mar 07 '19 at 18:54

Mohammad Usman · Accepted Answer · 2019-03-08T05:55:41.027

57

As order of values in array returned by Object.values() isn't guaranteed, you should consider use of .map() with some Object Destructuring. You can then extract object properties in separate variables and return them in desired order explicitly.

const data = [
  { amount: '100', user: 'admin', date: 'March 6, 2019' },
  { amount: '120', user: 'admin', date: 'March 6, 2019' },
  { amount: '80',  user: 'admin', date: 'March 7, 2019' },
  { amount: '200', user: 'admin', date: 'March 7, 2019' }
];

const result = data.map(({ amount, user, date }) => [amount, user, date]);

console.log(result);

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

edited Mar 08 '19 at 05:55

answered Mar 07 '19 at 10:47

Mohammad Usman

37,952
20
92
95

It doesn't seem to be mentioned in your `Object destructuring` link, but the order is preserved because variable names are relevant and should match the property names. `const result = data.map(({ date, amount, user }) => [amount, user, date]);` works just as well even though the variable definitions has been modified. This [link](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/) helped me understand. – Eric Duminil Mar 07 '19 at 21:38

ellipsis · Answer 2 · 2019-03-08T09:54:19.550

22

Using destructuring. Use this if property ordering (of the object) is required in the output

let orders = [
  {  amount: '100', user: 'admin', date: 'March 6, 2019' },
  {  amount: '120', user: 'admin', date: 'March 6, 2019' },
  {  amount: '80', user: 'admin', date: 'March 7, 2019' },
  {  amount: '200', user: 'admin', date: 'March 7, 2019' },
];

console.log(orders.map(({amount,user,date})=>[amount,user,date]))

Use map and Object.values to get the values from the objects. This does not assure the order in the output will be the same as in the object Refer this

let orders = [
  {  amount: '100', user: 'admin', date: 'March 6, 2019' },
  {  amount: '120', user: 'admin', date: 'March 6, 2019' },
  {  amount: '80', user: 'admin', date: 'March 7, 2019' },
  {  amount: '200', user: 'admin', date: 'March 7, 2019' },
];
console.log(orders.map(e=>Object.values(e)))

edited Mar 08 '19 at 09:54

answered Mar 07 '19 at 10:45

ellipsis

12,049
2
17
33

11

Even simpler `orders.map(Object.values)` – kemicofa ghost Mar 07 '19 at 10:47
15

It's relevant because it means your code could return `['100', 'admin', 'March 6, 2019']` for an order and `['admin', 80', 'March 7, 2019']` for another. – Eric Duminil Mar 07 '19 at 14:09
The spec does not require the order, but apparently all major browsers follow the order anyway. – JollyJoker Mar 08 '19 at 08:01
@JollyJoker **False.** I seem to remember that chrome has certain problems, especially when it comes to objects the have numerical keys. It orders it as 1, 111, 1245, 13 instead of 1, 13, 111, 1245. – see Mar 08 '19 at 08:23
@I.Am.A.Guy That's the order in the spec. See https://stackoverflow.com/a/30919039/7126740 – JollyJoker Mar 08 '19 at 08:35
The first part of your answer is potentially buggy. Could you please remove it or add at least add a warning? Your answer has been accepted and the question is on "Hot Network Questions", so many people will read it. – Eric Duminil Mar 08 '19 at 08:47

Salman A · Answer 3 · 2019-03-07T13:16:17.773

22

The order in which the object's properties are enumerated is not guaranteed (ref). The simplest solution is to explicitly specify the keys in the desired order:

let result = orders.map(order => [order.amount, order.user, order.date]);

edited Mar 07 '19 at 13:16

answered Mar 07 '19 at 12:36

Salman A

262,204
82
430
521

score 6 · Answer 4 · answered Mar 07 '19 at 11:11

Simply use orders.map(Object.values)

let orders = [
  {  amount: '100', user: 'admin', date: 'March 6, 2019' },
  {  amount: '120', user: 'admin', date: 'March 6, 2019' },
  {  amount: '80',  user: 'admin', date: 'March 7, 2019' },
  {  amount: '200', user: 'admin', date: 'March 7, 2019' },
];

const result = orders.map(Object.values);

console.log(result)

score 2 · Answer 5 · answered Mar 13 '19 at 11:58

let orders = [
  {  amount: '100', user: 'admin', date: 'March 6, 2019' },
  {  amount: '120', user: 'admin', date: 'March 6, 2019' },
  {  amount: '80',  user: 'admin', date: 'March 7, 2019' },
  {  amount: '200', user: 'admin', date: 'March 7, 2019' },
];

const result = orders.map(Object.values);

console.log(result)

Mateusz Jabłoński · Answer 6 · 2019-03-08T10:11:42.530

1

you can try this:

orders.map((order) => Object.values(order));

map will return you a new array, while forEach just do callback on each element of array

edited Mar 08 '19 at 10:11

answered Mar 07 '19 at 10:52

Mateusz Jabłoński

64
5

score 0 · Answer 7 · answered Mar 07 '19 at 18:47

A more robust solution, useful if you have many instances where you have these struct-like objects with different orders/keys. A functional approach, propsToArray takes a series of keys as individual parameters and returns a function which performs the desired transformation on the objects.

let orders = [
  {  amount: '100', user: 'admin', date: 'March 6, 2019' },
  {  amount: '120', user: 'admin', date: 'March 6, 2019' },
  {  amount: '80',  user: 'admin', date: 'March 7, 2019' },
  {  amount: '200', user: 'admin', date: 'March 7, 2019' },
];

// option 1
let propsToArray = function(...keys) {
    return function(obj) {
        return keys.map(key => obj[key]);
    }
};
// option 2
//  propsToArray = (...keys) => (obj) => keys.map(key => obj[key]);

// resulting function
let orderToArray = propsToArray("amount", "user", "date");

console.log(orders.map(orderToArray));

score 0 · Answer 8 · edited Mar 22 '19 at 15:57

let orders = [{
    amount: '100',
    user: 'admin',
    date: 'March 6, 2019'
  },
  {
    amount: '120',
    user: 'admin',
    date: 'March 6, 2019'
  },
  {
    amount: '80',
    user: 'admin',
    date: 'March 7, 2019'
  },
  {
    amount: '200',
    user: 'admin',
    date: 'March 7, 2019'
  },
];

let array = []; //initializing array
orders.forEach((element) => { //using array function for call back
  for (var j in element) { //looping through each element of array
    array.push(element[j]); //pushing each value of object present inside the orders
  }
});
console.log(array); //array is ready

Convert an array of objects to array of the objects' values

8 Answers8

Linked

Related