How to Extract Specific Key's Values From an Array of Objects in JavaScript?

Find out how to extract specific object key values into a new javascript array

Let's suppose you have the following array of objects:

const users = [
    { id: 0, name: 'John' },
    { id: 1, name: 'Wayne' },
    { id: 2, name: 'David' },
];

From this array of objects, if you wish to extract the values of all object properties called "name" for example into a new array, you can do so in the following ways:

Using Array.prototype.map()

You can use the Array.prototype.map() method to create a new array consisting of only specific key's values. Using Array.prototype.map() would call the provided callback function for each element of the array and add the returned values to the new resulting array. For example:

// ES5+
const names = users.map(function (user) {
    return user.name;
});

console.log(names); // ['John', 'Wayne', 'David']

In ES6+, you can shorten this syntax by using the arrow function and unpacking the relevant object property passed to the provided callback function, for example, like so:

// ES6+
const names = users.map(({ name }) => name);

console.log(names); // ['John', 'Wayne', 'David']

Using a for Loop

If you're unable to support a minimum ES5, then you may simply iterate over the array using a for loop for example, and extract object values into a new array in the following way:

const names = [];

for (let i = 0; i < users.length; i++) {
    if (!users[i].hasOwnProperty('name')) {
        continue;
    }

    names.push(users[i].name);
}

console.log(names); // ['John', 'Wayne', 'David']

Please note the use of the Object.prototype.hasOwnProperty() method in the code above; it is used so that object's inherited properties can be skipped and only object's own properties are considered.


Hope you found this post useful. It was published . Please show your love and support by sharing this post.