Returning only certain properties from an array of objects in Javascript

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?

score 56 · Accepted Answer · answered Jun 26 '14 at 21:22

56

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.

answered Jun 26 '14 at 21:22

Jacob Krall

28,341
6
66
76

IE 8 and below does not support `map` – Miguel Mota Jun 26 '14 at 21:29
1

The MDN documentation linked above includes a polyfill for IE8 and below. – Jacob Krall Jun 26 '14 at 21:32
function pluck(obj){return obj[this]} allows r.map(pluck,"key") – dandavis Jun 26 '14 at 22:29
@dandavis: agreed, that composes much more nicely (you can call `r.filter(pluck, "key")` to find items with a given key, for example). My version merely approximates what Underscore's `_.pluck` does. – Jacob Krall Jun 27 '14 at 12:09
Sometimes I want to do something similar (keep only certain properties in a JavaScript object): https://stackoverflow.com/a/67591318/470749 – Ryan Sep 13 '21 at 17:45

Miguel Mota · Answer 2 · 2014-06-26T21:27:30.830

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

score 1 · Answer 3 · answered Jun 26 '14 at 21:20

1

You would want to do something like this:

objArray.map(function (obj) { return obj.key; });

Here is a JSFiddle to demo: http://jsfiddle.net/Q7Cb3/

If you need older browser support, you can use your own method:

JSFiddle demo: http://jsfiddle.net/Q7Cb3/1/

function map (arr, func) {
    var i = arr.length;
    arr = arr.slice();
    while (i--) arr[i] = func(arr[i]);
    return arr;
}

answered Jun 26 '14 at 21:20

Robert Messerle

3,022
14
18

Note older browsers may not support `map`. – Mike Christensen Jun 26 '14 at 21:22

score 0 · Answer 4 · answered Jun 26 '14 at 21:22

Well something has to iterate through the elements of the array. You can use .map() to make it look nice:

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

You could make a function to generate a function to retrieve a particular key:

function plucker(prop) {
  return function(o) {
    return o[prop];
  };
}

Then:

var keys = objArray.map(plucker("key"));

score 0 · Answer 5 · answered Jun 26 '14 at 21:25

0

Really "objArray" is an array that have 3 objects inside, if you want list of keys, you can try this:

var keys = [];
for(a in objArray) {
    keys.push(objArray[a].key);
}

You have in var keys, the three keys.

Hope that helps! :)

answered Jun 26 '14 at 21:25

Rubén Guerrero

292
1
8

2

It is bad practice in JavaScript to use `for ... in` to iterate through arrays. – Pointy Jun 26 '14 at 21:30
for(var a = 0; a < objArray.lenght; a++){..} better, sorry. :) – Rubén Guerrero Jun 26 '14 at 21:31

Returning only certain properties from an array of objects in Javascript

5 Answers5

Linked

Related