CODEWITHSUNDEEP
javascriptecmascript-6
Dan Loze
Dan Loze

Reputation: 109

Destructuring objects from an array using map?

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!

Upvotes: 8

Views: 15568

Answers (5)

TColbert
TColbert

Reputation: 311

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

Upvotes: 3

Chaurasia
Chaurasia

Reputation: 496

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]

Upvotes: -1

Geuis
Geuis

Reputation: 42267

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 ]

Upvotes: 0

Robby Cornelissen
Robby Cornelissen

Reputation: 97140

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

Upvotes: 2

Hugo Silva
Hugo Silva

Reputation: 6938

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

Upvotes: 0

Related Questions