Get all unique object properties from array of objects

Question

Let's imagine I have an array of objects e.g.

 [{
    "firstName": "John",
    "lastName": "Doe"
 }, {
    "firstName": "Anna",
    "car": true
 }, {
    "firstName": "Peter",
    "lastName": "Jones"
 }]

I want to get all the unique property names from this array of objects, so the result will be:

[firstName, lastName, car]

How can I do it:

I can imagine that it's possible to do this with something like this:

function getPropertiesNames(obj){
  var arr = [];
  for(var name in obj) {
    if(arr.indexOf(name) != -1) arr.push(name);
  }
 return arr;
}

Why I need it:

I will have to make a table of multiple objects. Because each object can be a bit different I need unique property names. However I am going to do it in angularJS so it's kind of a bad option for me to once use loop to get property names for <th> and once again use loop with <tr ng-repeat></tr> to display values.

What i want:

Is there some option to get all unique property names from an array of objects without iterating it? Maybe some lodash or build in JS function which I don't know?

user3297291 · Accepted Answer · 2016-08-31 12:03:02Z

25

A solution using only:

var data = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "car": true
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}];

var uniqueKeys = Object.keys(data.reduce(function(result, obj) {
  return Object.assign(result, obj);
}, {}))

console.log(uniqueKeys);

answered Aug 31, 2016 at 12:03

user3297291

23.5k4 gold badges33 silver badges49 bronze badges

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

2 Comments

Andurit Over a year ago

Hi, thank you for answer. It looks a bit more readable. However may I ask you if it will be faster in compare with regular loop or answers in this questions?

user3297291 Over a year ago

It will not be faster than a regular loop. I'm not sure if there's a significant difference. The main benefits of using these standard methods is that they're safe (as in, they follow the js standards), and easy to read and understand. Have a look at the polyfills in the linked articles to get a feel of what they're doing under the hood.

adiga · Accepted Answer · 2019-07-15 08:47:49Z

You can use Object.assign() and spread syntax to merge the array of objects to a single object. Then get the keys from the merged object:

Object.keys(Object.assign({}, ...array))

Here's a snippet:

const array = [{firstName:"John",lastName:"Doe"},{firstName:"Anna",car:true},{firstName:"Peter",lastName:"Jones"}],
      unique = Object.keys(Object.assign({}, ...array))

console.log(unique)

Another option is to use Object.keys as callback to flatMap. This returns an array of all the keys. Then, create a Set to get unique keys and use Array.from() to convert the set to an array.

const keys = input.flatMap(Object.keys),
      unique = Array.from(new Set(keys));

Here's a working snippet:

const input=[{firstName:"John",lastName:"Doe"},{firstName:"Anna",car:true},{firstName:"Peter",lastName:"Jones"}],
      unique = Array.from(new Set(input.flatMap(Object.keys)));

console.log(unique)

If flatMap is not supported, you can use

const keys = [].concat(...input.map(Object.keys)),

Nenad Vracar · Accepted Answer · 2016-08-31 11:58:42Z

4

You could use map() and keys() to return keys of each object and then union() and flatten()

var data = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "car": true
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}]

var result = _.union(_.flatten(_.map(data, (e) => _.keys(e))));
console.log(result)

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

edited Aug 31, 2016 at 11:58

answered Aug 31, 2016 at 11:53

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

5 Comments

Andurit Over a year ago

Thank you for answer @NenadVracar, I would have 2 questions about it. 1. What this: ... means? 2. Any idea about performance in compare with my option or one from Tholle

Nenad Vracar Over a year ago

That is spread operator, you can use flatten instead, like in update.

Nenad Vracar Over a year ago

You can also use uniq like this var result = _.uniq(_.flatten(_.map(data, (e) => _.keys(e))));

Andurit Over a year ago

Thank you, please do not hesitate to add it to your answer :) I like that there are multiple options. Do you have any knowleage about speed of all of this options in compare with my code or codes below from other ppl?

Adam Boduch Over a year ago

You don't need to wrap _.keys() in an arrow function. Just pass it like this: _.map(data, _.keys)

Tholle · Accepted Answer · 2016-08-31 12:00:44Z

3

I don't think you can get away from checking each key in each object. You could accomplish it with e.g reduce:

var result = _.reduce(array, function(memory, obj) {
  for (var key in obj) {
    if(memory.indexOf(key) === -1) memory.push(key)
  }
  return memory;
}, []);

var array = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "car": true
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}];

var result = _.reduce(array, function(memory, obj) {
  for (var key in obj) {
    if(memory.indexOf(key) === -1) memory.push(key)
  }
  return memory;
}, []);

console.log(result);

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

Alternatively, you could store the keys in a new object, and just extract the keys:

var temp = _.reduce(array, function(memory, obj) {
  for (var key in obj) {
    memory[key] = null;
  }
  return memory;
}, {});
var result = Object.keys(temp);

var array = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "car": true
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}];

var temp = _.reduce(array, function(memory, obj) {
  for (var key in obj) {
    memory[key] = null;
  }
  return memory;
}, {});
var result = Object.keys(temp);

console.log(result);

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

edited Aug 31, 2016 at 12:00

answered Aug 31, 2016 at 11:50

Tholle

113k22 gold badges209 silver badges198 bronze badges

2 Comments

Andurit Over a year ago

Thank you for answer @Tholle, may I ask you what's that advantage of using this instead of clasic loop? I bet i miss something but from documentation it sounds like clasic loop

Tholle Over a year ago

@Andurit You're welcome! If you have a big array, a regular loop will probably be faster. If you have a small array, and you are like me and find reduce more readable, you might go with one of these solutions.

Dhananjaya Kuppu · Accepted Answer · 2016-08-31 12:03:11Z

2

You may also try this:

var source = [{
"firstName": "John",
"lastName": "Doe"
 }, {
"firstName": "Anna",
"car": true
 }, {
"firstName": "Peter",
"lastName": "Jones"
 }];

uniq(source);

function uniq(source){
   var result = source.reduce(function(p, c) {

     Object.keys(c).forEach(function(key) {
         p[key] = true;
     });

     return p;
    }, {});

    return Object.keys(result);
}

answered Aug 31, 2016 at 12:03

Dhananjaya Kuppu

1,3329 silver badges10 bronze badges

Comments

Rachid · Accepted Answer · 2016-08-31 12:06:54Z

2

You can use this:

var result = [];
array.reduce( function(pre, item) {
    Object.keys(item).forEach(function(i){
        if (result.indexOf(i) === -1){
            result.push(i);
        }
    });
});

var array = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "car": true
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}];

var result = [];
array.reduce( function(pre, item) {
    Object.keys(item).forEach(function(i){
        if (result.indexOf(i) === -1){
            result.push(i);
        }
    });
});

console.log(result);

edited Aug 31, 2016 at 12:06

answered Aug 31, 2016 at 12:00

Rachid

766 bronze badges

Comments

Ved · Accepted Answer · 2016-08-31 12:08:57Z

2

My solution without any library.

var array = [{
  "firstName": "John",
  "lastName": "Doe"
}, {
  "firstName": "Anna",
  "car": true
}, {
  "firstName": "Peter",
  "lastName": "Jones"
}];

var arr = [],merged,uniqArray;

array.forEach(function(val){ //Getting all properties
   arr.push(Object.keys(val))
 });

merged = [].concat.apply([], arr);//Merging all array to single array

merged.forEach(function(val){
  if(uniqArray.indexOf(val)== -1){// Getting uniqe values
   uniqArray.push(val)
}})

RESULT

["firstName", "lastName", "car"]

answered Aug 31, 2016 at 12:08

Ved

12.1k5 gold badges46 silver badges61 bronze badges

Comments

mplungjan · Accepted Answer · 2019-07-15 08:43:57Z

2

Alternative using flat

const arr = 
[{
    "firstName": "John",
    "lastName": "Doe"
 }, {
    "firstName": "Anna",
    "car": true
 }, {
    "firstName": "Peter",
    "lastName": "Jones"
 }].map(obj => Object.getOwnPropertyNames(obj)).flat()
const s = [...new Set(arr)]
console.log(s)

answered Jul 15, 2019 at 8:43

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

The Witness · Accepted Answer · 2019-07-15 08:29:14Z

0

One liner option:

[...new Set(a.map(Object.keys).reduce((a, b) => a.concat(b)))];

answered Jul 15, 2019 at 8:29

The Witness

9207 silver badges12 bronze badges

1 Comment

The Witness Over a year ago

I see someone didn't like it.

Collectives™ on Stack Overflow

Get all unique object properties from array of objects

9 Answers 9

2 Comments

Comments

5 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

Comments

5 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related