How to split an array of objects into multiple normal arrays where each array is populated by one property's values?

Question

I have an array of objects as follows:

var GOM = [{name:"Kuroko",ability:"misdirection"},
           {name:"Kise",ability:"perfect copy"},
           {name: "Akashi", ability: "emperor's eye"}];

Is it possible to split it into 2 arrays using some predefined function in lodash or native javascript(not forEach).

["Kuroko","Kise","Akashi"] and ["misdirection","perfect copy","emperor's eye"]

I know I can just do this:

var names = [];
var abilities = [];
GOM.forEach(function(member){
  names.push(member.name);
  abilities.push(member.ability);
});

but I am looking for another way.

yours is not a bad way... for what reason you are looking for another way? — PaulShovan
– PaulShovan, Commented Jul 8, 2015 at 20:11
What's wrong with forEach? Are you looking for some out-of-the box method that does this? — rgbchris
– rgbchris, Commented Jul 8, 2015 at 20:12
There is nothing wrong with forEach. I was just wondering if there was another predefined function to accomplish the same result. — Dhruv Prakash
– Dhruv Prakash, Commented Jul 8, 2015 at 20:18

Adam Boduch · Accepted Answer · 2015-07-08 21:25:10Z

4

Combine map(), values(), and unzip() into a wrapper:

var wrapper = _(GOM).map(_.values).unzip();

Then it's easy to grab the names:

wrapper.first()
// → [ "Kuroko", "Kise", "Akashi" ]

And abilities:

wrapper.last()
// → [ "misdirection", "perfect copy", "emperor's eye" ]

answered Jul 8, 2015 at 21:25

Adam Boduch

11.2k3 gold badges32 silver badges38 bronze badges

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

1 Comment

Dave Over a year ago

+1 but be aware that _values() doesn't guarantee order, so it might not be usable depending on the code requirements.

Dave · Accepted Answer · 2015-07-08 20:22:25Z

3

Array.map() works well for this:

var GOM = [{name:"Kuroko",ability:"misdirection"},{name:"Kise",ability:"perfect copy"},{name: "Akashi", ability: "emperor's eye"}];

var names = GOM.map(function(item) {
  return item.name;
});
var abilities = GOM.map(function(item) {
  return item.ability;
});
alert(names + '\n' + abilities);

answered Jul 8, 2015 at 20:22

Dave

11k3 gold badges45 silver badges54 bronze badges

Comments

dfsq · Accepted Answer · 2015-07-08 20:27:12Z

2

Looks like there is nothing shorter then two pluck's from lodash:

var data = [
  {name:"Kuroko",ability:"misdirection"},
  {name:"Kise",ability:"perfect copy"},
  {name: "Akashi", ability: "emperor's eye"}
];

var names = _.pluck(data, 'name');
var abilities = _.pluck(data, 'ability');

alert(JSON.stringify(names, null, 4));

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

answered Jul 8, 2015 at 20:27

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

Jordan Running · Accepted Answer · 2015-07-08 20:23:08Z

2

The code you have is just fine, but if you're looking for something more "functional," there's always reduce:

var GOM = [ { name: "Kuroko", ability: "misdirection" },
            { name: "Kise", ability: "perfect copy" },
            { name: "Akashi", ability: "emperor's eye" } ];

var result = GOM.reduce(function(memo, member) {
  memo.names.push(member.name);
  memo.abilities.push(member.ability);
  return memo;
}, { names: [], abilities: [] });

console.log(result.names);
// => [ "Kuroko", "Kise", "Akashi" ]

console.log(result.abilities);
// => [ "misdirection", "perfect copy", "emperor's eye" ]

answered Jul 8, 2015 at 20:23

Jordan Running

107k18 gold badges193 silver badges189 bronze badges

2 Comments

Dhruv Prakash Over a year ago

So the second parameter of reduce creates and initializes properties on the arguments of the first function?

Jordan Running Over a year ago

Yes, that's correct. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

How to split an array of objects into multiple normal arrays where each array is populated by one property's values?

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related