How to find property values from an array containing multiple objects in JavaScript ?

Last Updated : 15 Jan, 2024

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

Using for-loop
Using the filter() method
Using map() method
Using forEach() method
Using Lodash _.find() Method

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));

Output

[
  { 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")
);

Output

[
  { 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));

Output

[
  { 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));

Output

[
  { 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.