lodash - project/transform object into key value array

Question

I'm about to use forOwn to iterate through an object's properties and create an array manually and can't helping thinking there's a oneliner already available to do it.

{ 
  prop1 : "value",
  prop2: { sub:1}
}

to:

[ 
   {key: "prop1", value: "value"},
   {key: "prop2", value: {sub:1}}
]

Thanks

Ori Drori · Accepted Answer · 2018-12-22 21:03:13Z

40

You can use lodash's _.map() with shorthand property names:

const obj = { 
  prop1 : "value",
  prop2: { sub:1}
};

const result = _.map(obj, (value, prop) => ({ prop, value }));

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>

Or you can do it using Object#entries with Array.map() and array destructuring:

const obj = { 
  prop1 : "value",
  prop2: { sub:1}
};

const result = Object.entries(obj).map(([prop, value]) => ({ prop, value }));

console.log(result);

edited Dec 22, 2018 at 21:03

answered Aug 19, 2015 at 20:21

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

5 Comments

sambomartin Over a year ago

I've marked this as the answer as it fits my problem using lodash as requested. However, I've added a _.map to jsperf page comparing them. jsperf.com/loop-for-in-vs-object-keys-foreach/19 (excuse the additional snippet someone has added for the array op - completely ruined the test), but when comparing the forOwn with map, there's no real benefit to it

Ori Drori Over a year ago

The benefit is not in the performance, but in "oneliner already available to do it" as you requested :) Anyhow, remember that the difference in performance is only noticeable in a very large amount of items, and if that is not the issue go with _.map() as it's more readable (at least for me).

CyberMew Over a year ago

Object.entries is only available in ES2017, so if using ES2015 (ES6), it's not possible.

KoreMike Over a year ago

why is it: const result = _.map(obj, (value, prop) => ({ prop, value })); and not: const result = _.map(obj, (prop, value) => ({ prop, value })); ?

Ori Drori Over a year ago

Because when lodash's map passes the key (prop) as the 2nd param.

Joseph · Accepted Answer · 2015-08-19 16:14:06Z

13

You don't even need lodash for that:

var arr = Object.keys(obj).map(function(key){
  return { key: key, value: obj[key] };
});

answered Aug 19, 2015 at 16:14

Joseph

120k31 gold badges186 silver badges238 bronze badges

2 Comments

sambomartin Over a year ago

thanks for answer, interestingly Object.keys is slower than forOwn. jsperf.com/loop-for-in-vs-object-keys-foreach/19 - someone's ruined the test by adding some array ops to it, but look at Object.keys vs _.forOwn vs the new one i've added _.map

Joseph Over a year ago

@sambomartin Of course it will be "faster" since internally lodash just uses while loop for iteration. But then again, the question never asked for performance but for something that's already available.

Dzianis Sudas · Accepted Answer · 2016-06-02 15:04:50Z

10

A little bit of ES6 :

_.map( obj, (value, key) => ({key,value}) )

answered Jun 2, 2016 at 15:04

Dzianis Sudas

3833 silver badges17 bronze badges

Comments

Skarllot · Accepted Answer · 2015-08-19 16:20:48Z

4

You can use pairs if it fits your case:

_.pairs({ 'barney': 36, 'fred': 40 });
// → [['barney', 36], ['fred', 40]]

Ref: https://lodash.com/docs#pairs

answered Aug 19, 2015 at 16:20

Skarllot

7546 silver badges16 bronze badges

1 Comment

user663031 Over a year ago

But it doesn't fit his case.

Marcelo Lazaroni · Accepted Answer · 2016-09-08 14:09:51Z

3

If you are using lodash/fp you can use _.entries

const a = { one: 123, two: { value: 'b' }};

const pairs = _.entries(a).map(p => ({ key:p[0], value: p[1] }))

console.log(pairs)
// [
//   {
//     "key": "one",
//     "value": 123
//   },
//   {
//     "key": "two",
//     "value": {
//       "value": "b"
//     }
//   }
// ]

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-fp/4.15.0/lodash-fp.js"></script>

answered Sep 8, 2016 at 14:09

Marcelo Lazaroni

10.3k4 gold badges37 silver badges44 bronze badges

Comments

sambomartin · Accepted Answer · 2015-08-20 09:19:30Z

1

In response to Ori's comment and for completeness, I've posted the _.forOwn version. It's marginally faster but you need to declare the array first (not-a-one-liner).

var arr = [];
_.forOwn(obj,function(item, key) {
    arr.push({ property : key, value : item});
});

answered Aug 20, 2015 at 9:19

sambomartin

6,8237 gold badges43 silver badges64 bronze badges

1 Comment

sambomartin Over a year ago

@ori this is the forOwn version. thanks for your help. (jsperf.com/loop-for-in-vs-object-keys-foreach/19)

Collectives™ on Stack Overflow

lodash - project/transform object into key value array

6 Answers 6

5 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related