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!

Answer 1

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

Answer 2

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
}, {} )

Answer 3

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 ]

Answer 4

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

Answer 5

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]