How to find property values from an array containing multiple objects in JavaScript ?
To find property values from an array containing multiple objects in JavaScript, we have multiple approaches. In this article, we will learn how to find property values from an array containing multiple objects in JavaScript.
Several methods can be used to find property values from an array containing multiple objects.
Table of Content
Approach 1: Using for-loop
In this approach We create a function using a for-loop to iterate through objects, searching for a property’s value. Matching values are pushed into a new array, which is returned as the output.
Syntax:
for (statement 1 ; statement 2 ; statement 3){
code here...
}
Example: In this example, The function searchValue filters objects with a specific ‘fruit_color’ property value. It returns a new array with matching fruits.
Javascript
let fruits_details = [ { fruit_name: "Apple", fruit_color: "Red", }, { fruit_name: "Pomegranate", fruit_color: "Red", }, { fruit_name: "Banana", fruit_color: "Yellow", }, { fruit_name: "Grapes", fruit_color: "Green", },];let searchValue = (property_value, array) => { let new_array = []; for (let i = 0; i < array.length; i++) { if (array[i].fruit_color === property_value) { new_array.push(array[i]); } } return new_array;};console.log(searchValue("Red", fruits_details)); |
[
{ fruit_name: 'Apple', fruit_color: 'Red' },
{ fruit_name: 'Pomegranate', fruit_color: 'Red' }
]
Approach 2: Using the filter() method
In this approach Using the filter() method, we create a function to filter objects in the ‘fruits_details’ array based on a specific ‘fruit_color’ property value, returning a new array with matching fruits.
Syntax:
array.filter(callback(element, index, arr), thisValue)
Example: In this example, we will try to analyze a better approach to what exactly we have seen in the previous example itself. Here we will use the filter() method which will filter out all the properties and their corresponding values accordingly as per need.
Javascript
let fruits_details = [ { fruit_name: "Apple", fruit_color: "Red", }, { fruit_name: "Pomegranate", fruit_color: "Red", }, { fruit_name: "Banana", fruit_color: "Yellow", }, { fruit_name: "Grapes", fruit_color: "Green", },];console.log(fruits_details.filter( (element) => element.fruit_color === "Red")); |
[
{ fruit_name: 'Apple', fruit_color: 'Red' },
{ fruit_name: 'Pomegranate', fruit_color: 'Red' }
]
Approach 3 : Using map() method
In this approach, The map() method doesn’t directly filter objects, but we can use it to transform data by mapping the array elements to an array of matching fruits based on the ‘fruit_color’ property value.
Syntax:
const searchValue = (property_value, array) => {
return array.map((fruit) =>
fruit.fruit_color === property_value);
};
Example: In this example, the searchValue function uses the map() method to filter objects in the fruits_details array based on a specific ‘fruit_color’ property value. The function returns a new array containing objects with the matching ‘fruit_color’.
Javascript
const fruits_details = [ { fruit_name: "Apple", fruit_color: "Red", }, { fruit_name: "Pomegranate", fruit_color: "Red", }, { fruit_name: "Banana", fruit_color: "Yellow", }, { fruit_name: "Grapes", fruit_color: "Green", },];const searchValue = (property_value, array) => { return array.filter((fruit) => fruit.fruit_color === property_value);};console.log(searchValue("Red", fruits_details)); |
[
{ fruit_name: 'Apple', fruit_color: 'Red' },
{ fruit_name: 'Pomegranate', fruit_color: 'Red' }
]
Approach 4: Using forEach() method
In this approach, The forEach() method iterates through objects in the ‘fruits_details’ array. If ‘fruit_color’ matches the specified value, it pushes the fruit object into the new array, returning the filtered result.
Syntax:
array.forEach(callback(element, index, arr), thisValue)
Example: In this example, the forEach() method iterates through the fruits_details array. For each object, it checks if the ‘fruit_color’ property matches the specified property_value. If there’s a match, the fruit object is added to the filteredFruits array. The function returns the filtered array with fruits that match the specified ‘fruit_color’.
Javascript
const fruits_details = [ { fruit_name: "Apple", fruit_color: "Red", }, { fruit_name: "Pomegranate", fruit_color: "Red", }, { fruit_name: "Banana", fruit_color: "Yellow", }, { fruit_name: "Grapes", fruit_color: "Green", },];const searchValue = (property_value, array) => { const filteredFruits = []; array.forEach((fruit) => { if (fruit.fruit_color === property_value) { filteredFruits.push(fruit); } }); return filteredFruits;};console.log(searchValue("Red", fruits_details)); |
[
{ fruit_name: 'Apple', fruit_color: 'Red' },
{ fruit_name: 'Pomegranate', fruit_color: 'Red' }
]
Approach 5: Using Lodash _.find() Method
Lodash _.find() method accesses each value of the collection and returns the first element that passes a truth test for the predicate or undefined if no value passes the test. The function returns as soon as it finds the match. So it actually searches for elements according to the predicate.
Syntax:
_.find(collection, predicate, [fromIndex=0])
Example: In this example, we are passing the array and a function in the _.find() method which returns the matched first value.
Javascript
const _ = require('lodash');let x = [2, 5, 7, 10, 13, 15];let result = _.find(x, function (n) { if (n * n < 100) { return true; }});console.log(result); |
Output:
2
