Extract Value of a Property as Array in JavaScript
JavaScript gives us an array of objects, and sometimes these objects contain valuable information we need to use in our application. It is possible to extract the values of a certain property from all the objects in the array and store them in a separate array. In this article, we will learn how to do this.
Different methods used to extract value from Array of Objects
The following are the methods to extract values from an array of objects:
- For…in Loop
- Map() Method
- Filter() Method
- Find() Method
Using For…In Loop to extract value
The for…in loop is used to loop through the properties of an object. It is the most basic way to extract values from the array of objects.
Syntax:
const arr = [
{ name: "John", age: 25 },
{ name: "Jane", age: 27 },
{ name: "Bob", age: 22 }
];
const names = [];
for (let obj of arr) {
names.push(obj.name);
}
console.log(names); // ["John", "Jane", "Bob"]
In the above example, we have defined an array of objects with the properties name and age. We have created an empty array called names and then looped through the array of objects. For each object, we have used the .push() method to add the object’s name property to the names array.
Using Map() Method to Extract Value
The map() method is used to create a new array from an existing array. This method will return a new array with the same length as the existing array but with values based on what you define in the callback function.
Syntax:
const arr = [
{ name: "John", age: 25 },
{ name: "Jane", age: 27 },
{ name: "Bob", age: 22 }
];
const names = arr.map(obj => obj.name);
console.log(names); // ["John", "Jane", "Bob"]
In this example, we have used the map() method to extract the property name from each object in the arr array and store them in the names array.
Using Filter() Method to Extract Value
The filter() method is used to create a new array from an existing array based on a certain criteria. This method will return a new array with the same length as the existing array but with values based on what you define in the callback function.
Syntax:
const arr = [
{ name: "John", age: 25 },
{ name: "Jane", age: 27 },
{ name: "Bob", age: 22 }
];
const names = arr.filter(obj => obj.age > 25).map(obj => obj.name);
console.log(names); // ["Jane"]
In the above example, we have used the filter() method to filter out objects in the arr array with a property age greater than 25. We then used the map() method to extract the name property from each object that satisfies the criteria and store it in the names array.
Using Find() Method to Extract Value
The find() method is used to find an element in an array that satisfies a certain criteria. This method will return the first element in the array that satisfies the criteria.
Syntax:
const arr = [
{ name: "John", age: 25 },
{ name: "Jane", age: 27 },
{ name: "Bob", age: 22 }
];
const name = arr.find(obj => obj.age === 25).name;
console.log(name); // "John"
In the example above, we have used the find() method to find the first element in the arr array with a property age equal to 25 and then stored its name property in the name variable.
Conclusion
In this article, we have learned how to extract values of a certain property from an array of objects in JavaScript. We have seen four different methods – for…in loop, map() method, filter() method and find() method – to extract these values. Depending on the use case, one of these methods may be more efficient for extracting the values.
