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 that you can trip you (like has happened here), I like for …of much better and recommend it universally for beginners — Bergi
– Bergi, Commented Mar 7, 2019 at 18:54

Mohammad Usman · Accepted Answer · 2019-03-08 05:55:41Z

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 8, 2019 at 5:55

answered Mar 7, 2019 at 10:47

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Duminil Over a year ago

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 helped me understand.

Salman Arshad · Accepted Answer · 2019-03-07 13:16:17Z

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 7, 2019 at 13:16

answered Mar 7, 2019 at 12:36

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

Comments

ellipsis · Accepted Answer · 2019-03-08 09:54:19Z

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 8, 2019 at 9:54

answered Mar 7, 2019 at 10:45

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

6 Comments

kemicofa Over a year ago

Even simpler orders.map(Object.values)

Eric Duminil Over a year ago

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.

JollyJoker Over a year ago

The spec does not require the order, but apparently all major browsers follow the order anyway.

see Over a year ago

@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.

JollyJoker Over a year ago

@I.Am.A.Guy That's the order in the spec. See stackoverflow.com/a/30919039/7126740

|

Khyati Sharma · Accepted Answer · 2019-03-07 11:11:49Z

6

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)

answered Mar 7, 2019 at 11:11

Khyati Sharma

1091 silver badge9 bronze badges

Comments

Vipul · Accepted Answer · 2019-03-13 11:58:48Z

2

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)

answered Mar 13, 2019 at 11:58

Vipul

754 bronze badges

Comments

Mateusz Jabłoński · Accepted Answer · 2019-03-08 10:11:42Z

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 8, 2019 at 10:11

answered Mar 7, 2019 at 10:52

Mateusz Jabłoński

645 bronze badges

Comments

Conor O'Brien · Accepted Answer · 2019-03-07 18:47:28Z

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

demo · Accepted Answer · 2019-03-22 15:57:26Z

0

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

edited Mar 22, 2019 at 15:57

demo

6,29519 gold badges84 silver badges162 bronze badges

answered Mar 13, 2019 at 12:06

Vipul

754 bronze badges

Collectives™ on Stack Overflow

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

8 Answers 8

1 Comment

Comments

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related