How to extract values from certain keys from objects that are in an array

Question

I have this array of objects:var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];

I want to iterate through the 3 objects in the array and extract the name of each one, and then push that name into a new array.

This is what I thought would work:

var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];
var newArrayOfNames = [];
Object.values(array).forEach(function(name){
  newArrayOfNames.push(name);
});
console.log(newArrayOfNames);

Edit this `newArrayOfNames.push(name);` to `newArrayOfNames.push(name.name);` — guest, Jun 16 '17 at 08:50
I found that `Object.values(array)` is not supported in my test environment. Refer to [Uncaught TypeError: Object.values is not a function JavaScript](https://stackoverflow.com/a/38748490/6099429) — zhenguoli, Jun 16 '17 at 09:01

score 2 · Accepted Answer · answered Jun 16 '17 at 08:51

you can try this:

    var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];
    var newArrayOfNames = [];
    array.forEach(function(item) {
      newArrayOfNames.push(item.name);
    });
    console.log(newArrayOfNames);

score 1 · Answer 2 · answered Jun 16 '17 at 08:53

A small change to your code:

var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];
var newArrayOfNames = [];
Array.prototype.forEach.call(array, function(o){
  newArrayOfNames.push(o.name);
});
console.log(newArrayOfNames);

score 1 · Answer 3 · answered Jun 16 '17 at 08:53

let array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];
let names = []
for(let person of array) {
    names.push(person.name)
}

This should work, it takes the name attribute from the "person", which is in this case an entry in your array.

score 0 · Answer 4 · answered Jun 16 '17 at 08:52

A small change in your existing code would have worked:

var array = [{name: "Tom", id: 123}, {name: "chris", id: 1234}, {name: "Simon", id: 111}];
var newArrayOfNames = [];
Object.values(array).forEach(function(person){ // note that person is the object on each iteration of array
  newArrayOfNames.push(person.name); // object has property called name
});
console.log(newArrayOfNames); // => [ "Tom",  "chris",  "Simon" ]

germainelol · Answer 5 · 2017-06-16T08:59:12.127

This is the perfect use case for a .reduce(), whose goal is:

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

In your case, you want to accumulate all of the names and put them into a new Array. Perfect for .reduce().

Note that the acc argument stands for accumulator, so each time you loop through a person, you make your changes to the accumulator and then pass it to the next loop.

Note: I would not recommend solving your problem using .forEach() since forEach will make changes directly to your original Array. Any changes you do, will be applied to people, and you will get a new Array back from forEach. This is why methods such as Array.prototype.map/reduce exist!

const people = [
  { name: "Tom", id: 123} ,
  { name: "chris", id: 1234} ,
  { name: "Simon", id: 111 },
];

const names = people.reduce((acc, person) => {
  acc.push(person.name);

  return acc;
}, []);

score 0 · Answer 6 · answered Apr 24 '21 at 13:08

IMHO, the best approach as of 2021 is as follows:

let array = [
    {
        name: "Tom",
        id: 123
    },
    {
        name: "chris",
        id: 1234
    },
    {
        name: "Simon",
        id: 111
    }
];
// Use the Array's map function to transform the elements of the array into something else
let newArrayOfNames = array.map( pValue => pValue.name );

console.log( newArrayOfNames );

The map's documentation states:

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

This would be the most appropriate way (Provided you don't support IE anymore or you use a transpiler) since both arrays are of the same length.

If you need to omit elements I'd use the filter function for omitting those elements first and then the map function, and although that requires to iterate once through the original array and once through the filtered array, the purpose of the code is clearer for the reader of the code. Another approach is to use reduce to create another array and filter the elements in the callback given to reduce (not pushing them into the new array), this will only traverse the original array once but may lack clarity for readers depending on your code.

How to extract values from certain keys from objects that are in an array

6 Answers6