underscore.js: _.pick to extract properties inside an object that's in an array

Question

Below is the object that I have:

{
  "email": "joe@example.com",
  "id": null,
  "firstName": null,
  "lastName": null,
  "createdAt": "2016-10-05T18:16:07.000Z",
  "updatedAt": "2016-10-05T18:16:07.000Z",
  "Details": [
    {
      "id": 1,
      "token": null,
      "deviceId": null,
      "code": 12345678,
      "verified": null,
      "createdAt": "2016-10-05T18:16:07.000Z",
      "updatedAt": "2016-10-05T18:16:07.000Z",
      "UserEmail": "joe@example.com"
    }
  ]
}

I am hoping to use the pick method from the underscore.js library and return the following object:

{
  "email": "joe@example.com",
  "firstName": null,
  "lastName": null,
  "Details": [
    {
      "token": null,
      "deviceId": null,
      "code": 12345678,
      "verified": null,
    }
  ]
}

I have tried using:

var modifiedObj = _.pick(obj, 'email', 'firstName', 'lastName');

which returns:

{
  "email": "joe@example.com",
  "firstName": null,
  "lastName": null
}

How do I extract the Details object and only some of the properties inside it?

Answer 1

Rather than picking at multiple levels, I'd just do

 var obj = { "email": "joe@example.com", "id": null, "firstName": null, "lastName": null, "createdAt": "2016-10-05T18:16:07.000Z", "updatedAt": "2016-10-05T18:16:07.000Z", "Details": [ { "id": 1, "token": null, "deviceId": null, "code": 12345678, "verified": null, "createdAt": "2016-10-05T18:16:07.000Z", "updatedAt": "2016-10-05T18:16:07.000Z", "UserEmail": "joe@example.com" } ] }; var newObj = (({email, firstName, lastName, Details}) => ({ email, firstName, lastName, Details: Details.map( ({token, deviceId, code, verified}) => ({token, deviceId, code, verified})) }) )(obj); console.log(newObj); 

In this pattern, we "pick" using ES6 parameter destructuring by writing a function to which we pass an object, and extract the properties we want from that object right in the parameter list, with the ({p1, p2}) => syntax. Then, for the function's return value, we specify a new object containing just those properties, using object literal shorthand, which allows us to just write {p1, p2} to get the equivalent of {p1: p1, p2: p2} . So the simplest case, to pick properties p1 and p1 , would be

(({p1, p2}) => ({p2, p2}))(obj)

In the above example, we use this pattern once at the top level, then again to pick from each element of the Details array, via map .

Of course, if you really wanted to, or thought the above was too confusing, you could always pick "manually":

var newObj = {
  email: obj.email,
  ...,
  Details: obj.Details.map(function(detail) {
    return {token: detail.token, ...};
  })
};

Using _.pick

If you still want to use _.pick , then you need to do it twice:

var newObj = _.pick(obj, 'email', 'firstName', 'lastName', 'Details');
obj.Details = _.map(obj.Details, function(detail) {
  return detail.pick('token', ...);
});

Answer 2

可能这可以工作

var modifiedObj = _.pick(obj, 'email', 'firstName', 'lastName','Details[0].token','Details[0].deviceId','Details[0].code','Details[0].verified');