How can I select only a few fields when destructuring a JavaScript object?

Question

I can't seem to remember how to write this destructuring pattern, could you please help me?

Let's say I have an object like this:

{
  id: 'po_495743057439095',
  object: 'payout',
  amount: 18560,
  arrival_date: 1576195200,
  automatic: true,
  balance_transaction: 'txn_32472309478903284',
  created: 1575774863,
  currency: 'eur',
  description: 'STRIPE PAYOUT',
  destination: 'ba_329047329048323',
  failure_balance_transaction: null,
  failure_code: null,
  failure_message: null,
  livemode: true,
  metadata: {},
  method: 'standard',
  source_type: 'card',
  statement_descriptor: null,
  status: 'in_transit',
  type: 'bank_account',
}

(this is actually an object from the Stripe API).

I would like to push this object in my custom array, but only keeping 5 fields from it.

I can do:

arr.push({
  id: myObject.id,
  object: myObject.object,
  amount: myObject.amount,
  arrival_date: myObject.arrival_date,
  created: myObject.created
})

But I would like to know if there is any syntax that would help me achieve the same thing in a shorter way.

Basically I'm pretty sure there is a syntax to do it that requires writing the word 'myObject' only once, writing each key name once, and without creating temporary variables, but I can't remember how.

I'm not asking about writing a specific function, I don't need help for that. I'm just asking if there is a built-in destructuring syntax for doing this, because I'm pretty sure there is but I can't find it, despite searching for quite some time just before.

Edit:

Actually, I'm looking (if it exists) for that kind of syntax:

arr.push({id, object, amount, arrival_date, created} = myObject)

Unfortunately, it doesn't work, the whole object gets added. Is this close to getting it right?

If you are not strict about built in methods, you could use the `pick` function of lodash. `pick( myObject, [ 'id', 'object', 'amount', 'arrival_date', 'created'])` — abd995, Dec 09 '19 at 12:12
thanks for the suggestion, but yes I'm looking for a built-in way :) — Vincent, Dec 09 '19 at 12:13

abd995 · Answer 1 · 2019-12-09T12:28:17.757

I'm not sure if you can do this just using es6 object destructuring. But you could make use of some es6 functionalities to implement the lodash's pick function.

Object.assign(
  {},
  ...['id', 'object', 'amount', 'arrival_date', 'created'].map(key => ({
    [key]: myObject[key]
  }))
);

    const myObject = {
      id: 'po_495743057439095',
      object: 'payout',
      amount: 18560,
      arrival_date: 1576195200,
      automatic: true,
      balance_transaction: 'txn_32472309478903284',
      created: 1575774863,
      currency: 'eur',
      description: 'STRIPE PAYOUT',
      destination: 'ba_329047329048323',
      failure_balance_transaction: null,
      failure_code: null,
      failure_message: null,
      livemode: true,
      metadata: {},
      method: 'standard',
      source_type: 'card',
      statement_descriptor: null,
      status: 'in_transit',
      type: 'bank_account',
    };

    const newObject = Object.assign(
      {},
      ...['id', 'object', 'amount', 'arrival_date', 'created'].map(key => ({
        [key]: myObject[key]
      }))
    );
    console.log(newObject);

That's the simplest way to do so. Can you please explain [key] in this statement:- [key]: myObject[key]? — Swapnil, Apr 06 '21 at 23:17
Since you are running map on an array, in each iteration key will be 'id', 'object' etc. The the map returns a new object with { id: myObject[id] }, { object: myObject[object] } and so on which is then combined together to form a single object using Object.assign. Read more about Array.map and Object.assign if you need to know more about how they work. — abd995, Apr 08 '21 at 05:38

score 0 · Answer 2 · answered Dec 09 '19 at 12:06

0

let myObject = {
  id: 'po_495743057439095',
  object: 'payout',
  amount: 18560,
  arrival_date: 1576195200,
  automatic: true,
  balance_transaction: 'txn_32472309478903284',
  created: 1575774863,
  currency: 'eur',
  description: 'STRIPE PAYOUT',
  destination: 'ba_329047329048323',
  failure_balance_transaction: null,
  failure_code: null,
  failure_message: null,
  livemode: true,
  metadata: {},
  method: 'standard',
  source_type: 'card',
  statement_descriptor: null,
  status: 'in_transit',
  type: 'bank_account',
}

const {id, object, amount} = data;

Now instead of using myObject.id you will use id.

answered Dec 09 '19 at 12:06

Mirakurun

3,910
4
14
31

Is there any way to change your code in a way that wouldn't require creating those 3 variables in the scope? I tried arr.push({id, object, amount} = myObject) but the whole object gets added – Vincent Dec 09 '19 at 12:12
No, there is not. That is the correct way of destructuring an object. Read [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) more about it. – Mirakurun Dec 09 '19 at 12:20
Actually, there is, I found what I was looking for. You can read here about it: https://stackoverflow.com/questions/51340819/elegant-way-to-copy-only-a-part-of-an-object/51340842#51340842 – Vincent Dec 09 '19 at 12:29
@Vincent I am glad you found your solution, but you clearly stated you don't want specific functions, but built in one. :) `I'm not asking about writing a specific function, I don't need help for that. I'm just asking if there is a built-in destructuring syntax for doing this, because I'm pretty sure there is but I can't find it, despite searching for quite some time just before. ` – Mirakurun Dec 09 '19 at 12:31
Ahah :) For me, ({a,b})=>({a,b})(object) is something I consider a built-in javascript syntax with no custom code, but yes, sure, it is a function ;) – Vincent Dec 09 '19 at 12:51

score 0 · Answer 3 · answered Dec 09 '19 at 12:19

I think the closest thing what you can achieve is using ... operator called spread syntax.

Please find the example here:

const oldArray = [{
  id: 'po_495743057439095',
  object: 'payout',
  amount: 18560,
  arrival_date: 1576195200,
  automatic: true,
  balance_transaction: 'txn_32472309478903284',
  created: 1575774863,
  currency: 'eur',
  description: 'STRIPE PAYOUT',
  destination: 'ba_329047329048323',
  failure_balance_transaction: null,
  failure_code: null,
  failure_message: null,
  livemode: true,
  metadata: {},
  method: 'standard',
  source_type: 'card',
  statement_descriptor: null,
  status: 'in_transit',
  type: 'bank_account',
}];

const newArray = [...oldArray.map(({id, object, amount, arrival_date, created}) => {
  return {id, object, amount, arrival_date, created};
})];

console.log(newArray);

Read further here: Spread syntax

I hope that helps!

How can I select only a few fields when destructuring a JavaScript object?

3 Answers3