CodingSparkles

Four Possible Ways of Finding an object (Array of Objects)

JavaScript

3 min read

October 05, 2021

Four Possible Ways of Finding an object (Array of Objects)

An Array of objects plays an important role in real-time web development. Particularly while working with the JavaScript-based application, it is the most important component. So we can get a situation to find the particular object/element from the array of objects/elements. In this article, we’re going to explore five possible ways to find the object/element from the JavaScript array. Let us begin and look at the methods.

Input Array

const fruits = [
    {
        name: 'Apple',
        color: 'Red',
        calories: '52'
    },
    {
        name: 'Grape',
        color: 'Green',
        calories: '67'
    },
    {
        name: 'Pomegranate',
        color: 'Dark Red',
        calories: '83'
    },
    {
        name: 'Mango',
        color: 'Yellow',
        calories: '60'
    }
];

1) Using find

find() returns the first corresponding object of a given array.
In the example below, we get the first matching object based on the name property.

const findFruit = fruits.find(item => item.name === "Grape") ;

2) Using findIndex

findIndex() method returns the first matching object index value. Depending on the index value retrieved, the corresponding object can be obtained from an array.
In the example below, we get the first corresponding object index according to the name property. Then, we retrieve the object based on the index.

const findFruitIndex = fruits.findIndex(item => item.name === "Mango") ;
const matchingObject = fruits[findFruitIndex];

3) Using filter

filter() method returns all the matching object as a new array.
We can iterate the objects one by one from the output array or use the filtered objects as an array.
In the following example, we get the first corresponding object using the name property. Then we get the first object by passing the index value at 0.

const filterFruit = fruits.filter(item => item.name === "Pomegranate");
const matchingObject = filterFruit[0];

4) Using forEach

forEach() method used to loop each item one by one from the array of objects.
Write our conditions in the loop and push the item to the new array when the conditions match.
Iterate the individual objects from the resulting array or use the filtered objects as an array.
In the following example, we get the first corresponding object using the name property. Then we get the first object by passing the index value at 0.

const findFruitByLoop = [];
 fruits.forEach(item => {
  if(item.name === "Apple")
    findFruitByLoop.push(item);
}) ;
const matchingObject = findFruitByLoop[0];