How to get property names of objects in array?

Question

Here is my array:

var testeArray = [
    {name: "Jovem1", esteira: "Macaco"},
    {name: "Jovem", esteira: "Doido", horse: "Chimbinha"}
];

From the above, I would like to get a array like this:

var propertyName = ["name", "esteira", "horse"];

The array contains all the property names of the objects in the array of objects. I tried Form array of property names found in a JavaScript Object but the result was:

['0', '1']

It's because you are getting the properties of the array, not the objects within it — Andrew Li
– Andrew Li, Commented Jan 28, 2017 at 16:10

Nina Scholz · Accepted Answer · 2017-01-28 16:23:41Z

6

You could iterate the array with Array#forEach and get the keys with Object.keys and collect the names in an object. Then take the keys as result.

var testeArray = [{name: "Jovem1", esteira: "Macaco"}, {name: "Jovem", esteira: "Doido", horse: "Chimbinha" }],
    names = Object.create(null),
    result;

testeArray.forEach(function (o) {
    Object.keys(o).forEach(function (k) {
        names[k] = true;
    });
});

result = Object.keys(names);
console.log(result);

ES6 with Set and spread syntax ...

var array = [{name: "Jovem1", esteira: "Macaco"}, {name: "Jovem", esteira: "Doido", horse: "Chimbinha" }],
    names = [...array.reduce((s, o) => (Object.keys(o).forEach(k => s.add(k)), s), new Set)];
console.log(names);

edited Jan 28, 2017 at 16:23

answered Jan 28, 2017 at 16:11

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

8 Comments

ibrahim mahrir Over a year ago

That is even quicker as it won't need to call tons of indexOf.

Redu Over a year ago

@ibrahim mahrir I don't think this is any quicker than using indexOf

ibrahim mahrir Over a year ago

@Redu Why? I think objects use hashing so it would be quicker (in performance) than calling indexOf for each key of each object.

ibrahim mahrir Over a year ago

@Redu you said it yourself in your answer bellow. lol. (is as quick as it could get)

Redu Over a year ago

@ibrahim mahrir You are preventing the dupes with indexOf and Nina Scholz is doing the same job with a Set object. Do you think Set object eliminates dupes magically in O(1) time..? Both codes should be similar in terms of performance.

|

Redu · Accepted Answer · 2017-04-13 13:01:47Z

3

You can very simply do as follows; I think it's probably the most efficient code so far.

var testArray = [
    {name: "Jovem1", esteira: "Macaco"},
    {name: "Jovem", esteira: "Doido", horse: "Chimbinha"}
],
props = Object.keys(testArray.reduce((o,c) => Object.assign(o,c)));
console.log(props);

edited Apr 13, 2017 at 13:01

answered Jan 28, 2017 at 16:52

Redu

26.3k6 gold badges61 silver badges84 bronze badges

6 Comments

Nina Scholz Over a year ago

Object.assign is ES6, then you could use 4castle's idea with spreaded objects.

Redu Over a year ago

@Nina Scholz Oh.. I hadn't seen that comment. (even i had searched for the assign keyword in the page) That's also a pretty valid idea of course but the spread operator "might" turn out to be slow. Let me up-vote his comment.

castletheperson Over a year ago

It's more likely the spread operator would be faster. There's much fewer function calls.

Redu Over a year ago

@4castle You might be right with the function calls. I wish i could make .reduce(Object.assign) alas i and a (the index and the array itself) jumps into the mix.

Redu Over a year ago

@4castle I was curious.. So i did some tests. It seems your code has two problems. 1) As i was suspecting it's slow due to the spread operator. 2) Whats more to the point, the spread operator has one other major disadvantage.. You can not feed it with an array of indefinitely many items.. In this particular case it turns out to be for above 500K items, you will get a RangeError: Maximum call stack size exceeded... So there is also that.

|

ibrahim mahrir · Accepted Answer · 2017-01-28 16:14:21Z

1

var testArray = [{
  name: "Jovem1",
  esteira: "Macaco"
}, {
  name: "Jovem",
  esteira: "Doido",
  horse: "Chimbinha"
}];

var propName = [];

testArray.forEach(function(o) {
  Object.keys(o).forEach(function(prop) {
    if (propName.indexOf(prop) < 0)
      propName.push(prop);
  });
});

console.log(propName);

answered Jan 28, 2017 at 16:14

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Comments

Christos · Accepted Answer · 2017-01-28 16:13:20Z

0

You could try something like this:

 var testeArray = [
    {name: "Jovem1", esteira: "Macaco"},
    {name: "Jovem", esteira: "Doido", horse: "Chimbinha" }
  ];

// The array in which we push the unique property names.
var properties = [];

testeArray.forEach(function(obj){
    for(var key in obj){
       if(obj.hasOwnProperty(key) 
          && properties.indexOf(key) === -1) { 
          // It's the first time we hit key. So push it to the array.
         properties.push(key);
       }
    }
});

console.log(properties);

answered Jan 28, 2017 at 16:13

Christos

54.1k9 gold badges82 silver badges114 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2017-01-28 16:14:39Z

0

First get all the properties from the array using Object.keys and then filter out to get the distinct ones

var testeArray = [
    {name: "Jovem1", esteira: "Macaco"},
    {name: "Jovem", esteira: "Doido", horse: "Chimbinha" }
  ]

var properties = [];
testeArray.forEach(function (o) {
    Object.keys(o).forEach(function (k) {
        properties.push(k)
    });
});

var distProps = properties.filter(function(item, i, arr) {
    return arr.indexOf(item) === i;
})
console.log(distProps);

answered Jan 28, 2017 at 16:14

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Comments

Nenad Vracar · Accepted Answer · 2017-01-28 16:16:27Z

0

With ES6 you can use Set and spread syntax ... to do this.

var testeArray = [
  {name: "Jovem1", esteira: "Macaco"},
  {name: "Jovem", esteira: "Doido", horse: "Chimbinha" }
];

var result = [...new Set([].concat(...testeArray.map(e => Object.keys(e))))]
console.log(result)

answered Jan 28, 2017 at 16:16

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Comments

RomanPerekhrest · Accepted Answer · 2017-01-28 16:19:56Z

Ecmascript5 solution using Array.prototyp.reduce() and Object.keys() functions:

var testeArray = [
    {name: "Jovem1", esteira: "Macaco"},
    {name: "Jovem", esteira: "Doido", horse: "Chimbinha" }
  ],
    keys = testeArray.reduce(function(r, o) {
        Object.keys(o).forEach(function (k) {
            if (r.indexOf(k) === -1) r.push(k);
        })
        return r;
    }, []);

console.log(keys);

Ecmascript6 solution using Set objects and Array.from function:

var testeArray = [
    {name: "Jovem1", esteira: "Macaco"},
    {name: "Jovem", esteira: "Doido", horse: "Chimbinha" }
  ],
    keys = testeArray.reduce(function(r, o) {
        var newSet = new Set(Object.keys(o));
        return new Set([...r, ...newSet]);
    }, new Set());

console.log(Array.from(keys));

[...r, ...newSet] within new Set([...r, ...newSet]) means that r and newSet are converted to arrays and concatenated.

yivo · Accepted Answer · 2017-01-28 16:21:49Z

function collectProperties(arrayOfObjects) {
  return arrayOfObjects.reduce(function(memo, object) {
    Object.keys(object).forEach(function(key) {
      if (memo.indexOf(key) === -1) { memo.push(key) };
    });
    return memo;
  }, []);
}

var testArray = [
  {name: "Jovem1", esteira: "Macaco"},
  {name: "Jovem", esteira: "Doido", horse: "Chimbinha"}
];

console.log(collectProperties(testArray));

So collectProperties(testeArray) returns ['name', 'esteira', 'horse'].

Or in CoffeeScript:

collectProperties = (arrayOfObjects) ->
  properties = []
  for object in arrayOfObjects
    for own property of object when property not in properties
      properties.push(property)
  properties

testArray = [
  {name: "Jovem1", esteira: "Macaco"}
  {name: "Jovem", esteira: "Doido", horse: "Chimbinha"}
]

console.log(collectProperties(testArray))

Collectives™ on Stack Overflow

How to get property names of objects in array?

8 Answers 8

8 Comments

6 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

8 Comments

6 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related