Get values of specific property of array elements in Javascript

Question

I have following question on Javascript Suppose we have srcArr - array of objects , each defined as following

var srcElement = {id:id_val , prop1:value1, prop2:value2}

I need to get array of id-s of array elements.I.e. array of elements like {id;:id_val} The simplest way is something like this

var arrayLength = srcArr.length;
for (var index=0; index<arrayLength;index++) {
  idsArr.push(srcArr[index].id);     
}

The question is : Is there more effective way to get ids of array elements?
Thanks in advance

If you don't have a problem, then it seems the question is a better fit for codereview.stackexchange.com. — Felix Kling
– Felix Kling, Commented Dec 6, 2013 at 7:09
Btw, how do you define "more effective"? Doesn't the code do what you want? — Felix Kling
– Felix Kling, Commented Dec 6, 2013 at 7:10
I meant : is this native implementation (with for loop) the fastest ? — lm.
– lm., Commented Dec 6, 2013 at 7:21

elclanrs · Accepted Answer · 2013-12-06 07:06:38Z

2

A common re-usable functional approach:

var collec = [
  {num:1, str:'a'},
  {num:2, str:'b'}
];

var dot = function(prop) {
  return function(obj) {
    return obj[prop];
  }
};

collec.map(dot('num')); //=> [1,2]
collec.map(dot('str')); //=> ['a','b']

answered Dec 6, 2013 at 7:06

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

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

Comments

Vishal Suthar · Accepted Answer · 2013-12-06 07:25:17Z

The map method can be used as an iterator, but is really meant to manipulate the supplied array and return a new array.

So at the end:

For loop map is much more faster than Jquery map. Test the performance of the same here

Here you go:

var srcArray = [{
    id: 1,
    prop1: 'a',
    prop2: 'b'
}, {
    id: 2,
    prop1: 'c',
    prop2: 'd'
}];
map = function (array, mapFunction) {
    var newArray = new Array(array.length);
    for (var i = 0; i < array.length; i++) {
        newArray[i] = mapFunction(array[i]);
    }

    return newArray;
}
var newItems = map(srcArray, function (i) {
    return i.id;
});

Output

newItems: [1,2]

Live Demo

roo2 · Accepted Answer · 2013-12-06 07:31:39Z

1

using underscore.js's map function

srcArr = [{id:1}, {id:2}]
var result = _.map(srcArr, function(el){
    return el.id
});
//result = [1,2]

map will perform the same function on each element and add the result to a new array

EDIT: this is not as fast as a native for loop.

http://jsperf.com/javascript-map-vs-jquery-map-vs-jquery-each

edited Dec 6, 2013 at 7:31

answered Dec 6, 2013 at 7:04

roo2

6,0712 gold badges34 silver badges45 bronze badges

7 Comments

Grundy Over a year ago

why you think that is more effective?

Grundy Over a year ago

underscore map use native map if it possible

roo2 Over a year ago

map is a common pattern that defines exatly what we want to do: map one array to another

Grundy Over a year ago

so why not use native implementation?

roo2 Over a year ago

native array.map is added in ECMA5 so wont work in old browsers developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

|

score 0 · Accepted Answer · 2013-12-06 07:35:33Z

If effective means short and readable, you could use the Lodash pluck function :

var idsArr = _.pluck(srcArr, 'id');

http://lodash.com/docs#pluck

Here is the souce code : https://github.com/lodash/lodash/blob/2.4.1/dist/lodash.compat.js#L3848. I suspect it to be slower than a good old for loop but you should run some performance tests if you actually care about that : google "jsperf map".

That said, it's quite easy to write your own pluck function :

function pluck(src, key) {
    var i = 0, l = src.length, result = [];
    while (i < l) result.push(src[i++][key]);
    return result;
}

Collectives™ on Stack Overflow

Get values of specific property of array elements in Javascript

4 Answers 4

Comments

Comments

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

7 Comments

Comments

Related