Returning only certain properties from an array of objects in Javascript [duplicate]

Question

If I have an object such that

var object = function(key,text)
{
    this.key = key;
    this.text = text;
}

And create an array of these objects

var objArray = [];
objArray[0] = new object('key1','blank');
objArray[1] = new object('key2','exampletext');
objArray[2] = new object('key3','moretext');

is there a way that I can retrieve only one of the properties of all of the objects in the array? For example:

var keyArray = objArray["key"]; 

The above example doesn't return set keyArray to anything, but I was hoping it would be set to something like this:

keyArray = [
    'key1',
    'key2',
    'key3']

Does anyone know of a way to do this without iterating through the objArray and manually copying each key property to the key array?

Answer 1

This is easily done with the Array.prototype.map() function:

var keyArray = objArray.map(function(item) { return item["key"]; });

If you are going to do this often, you could write a function that abstracts away the map:

function pluck(array, key) {
  return array.map(function(item) { return item[key]; });
}

In fact, the Underscore library has a built-in function called pluck that does exactly that.

Answer 2

var object = function(key,text) {
    this.key = key;
    this.text = text;
}

var objArray = [];
objArray[0] = new object('key1','blank');
objArray[1] = new object('key2','exampletext');
objArray[2] = new object('key3','moretext');

var keys = objArray.map(function(o,i) {
  return o.key;
});

console.log(keys); // ["key1", "key2", "key3"]

JS Bin Example

http://jsbin.com/vamey/1/edit

Note that older browsers may not support map but you can easily do this with a for loop:

var keys = [];

for (var i = 0; i < objArray.length; i++) {
  keys.push(objArray[i].key);
}

JS Bin Example

http://jsbin.com/redis/1/edit