snippetjavascriptTip
Pluck values from an array of objects in JavaScript
Viewed 0 times
javascriptfromobjectspluckarrayvalues
Problem
Ever wanted to extract values from an array of objects based on a specific key? This is pretty common and can be achieved with a simple one-liner in JavaScript.
All you need to do is use
If you want to extract multiple values for each object, you can use a nested
Instead of having two separate functions for plucking a single value and multiple values, you can create a single function that accepts a variable number of keys. This way, you can pluck any number of values for each object.
In order to do so, you can use the rest argument syntax (
All you need to do is use
Array.prototype.map() to map the array of objects to the value of the specified key for each object.If you want to extract multiple values for each object, you can use a nested
map() to iterate over the keys. This results in each object being mapped to an array of values.Instead of having two separate functions for plucking a single value and multiple values, you can create a single function that accepts a variable number of keys. This way, you can pluck any number of values for each object.
In order to do so, you can use the rest argument syntax (
...keys) to collect all the keys into an array. Then, you can check the length of the keys array to determine whether to return single or multiple values.Solution
const pluck = (arr, key) => arr.map(i => i[key]);
const simpsons = [
{ name: 'Lisa', age: 8, username: 'lisa_simpson' },
{ name: 'Homer', age: 36, username: 'homer_simpson' },
{ name: 'Marge', age: 34, username: 'marge_simpson' },
{ name: 'Bart', age: 10, username: 'bart_simpson' }
];
pluck(simpsons, 'age');
// [8, 36, 34, 10]If you want to extract multiple values for each object, you can use a nested
map() to iterate over the keys. This results in each object being mapped to an array of values.Instead of having two separate functions for plucking a single value and multiple values, you can create a single function that accepts a variable number of keys. This way, you can pluck any number of values for each object.
In order to do so, you can use the rest argument syntax (
...keys) to collect all the keys into an array. Then, you can check the length of the keys array to determine whether to return single or multiple values.Code Snippets
const pluck = (arr, key) => arr.map(i => i[key]);
const simpsons = [
{ name: 'Lisa', age: 8, username: 'lisa_simpson' },
{ name: 'Homer', age: 36, username: 'homer_simpson' },
{ name: 'Marge', age: 34, username: 'marge_simpson' },
{ name: 'Bart', age: 10, username: 'bart_simpson' }
];
pluck(simpsons, 'age');
// [8, 36, 34, 10]const pluck = (arr, keys) => arr.map(i => keys.map(k => i[k]));
const simpsons = [
{ name: 'Lisa', age: 8, username: 'lisa_simpson' },
{ name: 'Homer', age: 36, username: 'homer_simpson' },
{ name: 'Marge', age: 34, username: 'marge_simpson' },
{ name: 'Bart', age: 10, username: 'bart_simpson' }
];
pluck(simpsons, ['name', 'age']);
// [['Lisa', 8], ['Homer', 36], ['Marge', 34], ['Bart', 10]]const pluck = (arr, ...keys) =>
keys.length > 1 ?
arr.map(i => keys.map(k => i[k])) :
arr.map(i => i[keys[0]]);
const simpsons = [
{ name: 'Lisa', age: 8, username: 'lisa_simpson' },
{ name: 'Homer', age: 36, username: 'homer_simpson' },
{ name: 'Marge', age: 34, username: 'marge_simpson' },
{ name: 'Bart', age: 10, username: 'bart_simpson' }
];
pluck(simpsons, 'age');
// [8, 36, 34, 10]
pluck(simpsons, 'name', 'age');
// [['Lisa', 8], ['Homer', 36], ['Marge', 34], ['Bart', 10]]Context
From 30-seconds-of-code: pluck-values-from-object-array
Revisions (0)
No revisions yet.