Destructuring objects from an array using map?

Question

I have wrote this simple code that destructures an array of objects to build new arrays from each key. I am learning ES6 and would like to refactor it into one line of code using destructuring but I dont fully understand how too.

let candles = [{
  open: 1,
  high: 2,
  low: 0.5,
  close: 1.5,
  volume: 200
}];
let open = candles.map(x => x.open);
let high = candles.map(x => x.high);
let low = candles.map(x => x.low);
let close = candles.map(x => x.close);
let volume = candles.map(x => x.volume);

console.log(open, high, low, close, volume);

I am thinking it should look something along the lines of this?

let [open, high, low, close, volume] = candles.map(key => key.value);

But it is clearly wrong! Thank you for help if someone can direct me the correct way on doing this!

You're mapping arrays to an arrays of arrays in the first snippet — Andrew Li
– Andrew Li, Commented Jan 30, 2019 at 1:09
Some before and after examples of sample data would greatly help explain what you're trying to do but as far as I can tell, you won't be able to do this with a one-liner — Phil
– Phil, Commented Jan 30, 2019 at 1:09
Ah, okay. That could explain why. But here is some sample data. [ { open, high, low, close, volume}, {open, high, low, close, volume}, ...] I am looking to convert that object of arrays a seperate array of all the opens, high, low, close, volume. So they each live in their own array after. @Li357 candles is actually an array with objects. — Dan Loze
– Dan Loze, Commented Jan 30, 2019 at 1:13
"Some before AND AFTER examples..." you only addressed the first half — Phil
– Phil, Commented Jan 30, 2019 at 1:32

TColbert · Accepted Answer · 2021-08-06 13:15:13Z

3

Although map is powerful and useful it is not the most effective strategy for your example case.

The simplest way to do this is to not use map at all. If you truly want a one-line solution try using destructuring:

let candles = [{
  open: 1,
  high: 2,
  low: 0.5,
  close: 1.5,
  volume: 200
}];

[{open, high, low, close, volume}] = candles

That simple one-liner is all you need:

console.log(open, high, low, close, volume)  // 1 2 0.5 1.5 200

answered Aug 6, 2021 at 13:15

TColbert

3212 silver badges7 bronze badges

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

Comments

Robby Cornelissen · Accepted Answer · 2019-01-30 01:21:00Z

2

Here's a solution using Array.prototype.reduce():

const candles = [{open: 1, close: 2, low: 3, high: 4, volume: 5}, {open: 6, close: 7, low: 8, high: 9, volume: 10}];

const result = candles.reduce((a, v) => {
  Object.keys(v).forEach(k => (a[k] = a[k] || []).push(v[k]));
  return a;
}, {});

console.log(result);

answered Jan 30, 2019 at 1:21

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Comments

Hugo Silva · Accepted Answer · 2019-01-30 01:20:09Z

0

let candles = [ {
  open: 1,
  high: 2,
  low: 0.5,
  close: 1.5,
  volume: 200
} ]

const { open, high, low, close, volume } = candles.reduce( ( accumulator, item ) => {
    Object.keys( item ).forEach( key => {
        accumulator[ key ] = ( accumulator[ key ] || [] ).concat( item[ key ] ) 
    } )
    return accumulator
}, {} )

answered Jan 30, 2019 at 1:20

Hugo Silva

6,9863 gold badges29 silver badges42 bronze badges

Comments

Geuis · Accepted Answer · 2019-01-30 01:21:55Z

0

So you should start with reduce first and return an object. Then you can use destructuring on that. Here's an example:

const candles = [{
  open: 1,
  high: 2,
  low: 0.5,
  close: 1.5,
  volume: 200
}, {
  open: 2,
  high: 3,
  low: 0.6,
  close: 1.4,
  volume: 300
}];

const reduction = candles.reduce((acc, candle) => {
  for (let key in candle) {
    if (!(key in acc)) {
      acc[key] = [];
    }

    acc[key].push(candle[key]);
  }

  return acc;
}, {});

console.log(reduction);
// { open: [ 1, 2 ],
//   high: [ 2, 3 ],
//   low: [ 0.5, 0.6 ],
//   close: [ 1.5, 1.4 ],
//   volume: [ 200, 300 ] }

const {open, high, low, close, volume} = reduction;

console.log(open, high, low, close, volume);
// [ 1, 2 ] [ 2, 3 ] [ 0.5, 0.6 ] [ 1.5, 1.4 ] [ 200, 300 ]

answered Jan 30, 2019 at 1:21

Geuis

42.5k57 gold badges164 silver badges223 bronze badges

2 Comments

Geuis Over a year ago

FYI: Hugo Silva's answer is the same technique. I broke mine out a bit to be easier to understand what's going on.

Dan Loze Over a year ago

Thank you! I find it hard working with objects in es6.

Chaurasia · Accepted Answer · 2021-06-05 21:27:45Z

-1

Array map destructuring

Simple trick: [{id:1, name:'awadhesh'}].map(({id, name}) => id + '---' + name);

let candles = [{
 open: 1,
 high: 2,
 low: 0.5,
 close: 1.5,
 volume: 200
}];
let open = candles.map(({open}) => open);
let high = candles.map(({high}) => high);
let low = candles.map(({low}) => low);
let close = candles.map(({close}) => close);
let volume = candles.map(({volume}) => volume);

console.log(open, high, low, close, volume);

log print = [1] [2] [0.5] [1.5] [200]

answered Jun 5, 2021 at 21:27

Chaurasia

4961 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

Destructuring objects from an array using map?

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related