How To Find a Value in an Array of Objects in Javascript – Definitive Guide

JavaScript arrays allow you to store multiple elements in a single object.

You can find a value in an array of objects in JavaScript using the array.find(obj => obj.id === id) statement.

Basic Example

    let birdsObj = [
     { id: '100', name: 'owl'}, 
     { id: '101', name: 'dove'}, 
     { id: '102', name: 'parrot' }
     ];

const id = '101';

var bird = birdsObj.find(bird => bird.id === id);

console.log(bird);

This tutorial teaches you how to find a value in an array of objects in JavaScript and when it is appropriate to use each method.

Using Find() Method

The array find() method returns the first element in the array that satisfies the provided condition.

• If no value meets the condition, undefined is returned.

Use this method when you want to get the matching value object from an array of objects.

To find a value in an array using the find() method,

• Invoke the find() method in the array object
• Using the arrow function, pass the id to find the object using its id

Code

The following code demonstrates how to use the find() method to find the object with id 101.

    let birdsObj = [{
     id: '100',
     name: 'owl'
    }, {
        id: '101',
      name: 'dove'
    }, {
        id: '102',
      name: 'parrot'
    }];

    const id = '101';

    var bird = birdsObj.find(bird => bird.id === id);

    console.log(bird);

Output

    { id: "101", name: "dove"}

Using FindIndex() Method

The findIndex() method returns the index of the first element in an array that satisfies the provided condition.

• If no elements pass the condition, -1 is returned.

The findIndex() method is similar to the previous .find() method, and the difference is the findIndex() returns the index of the object, whereas the find() method returns the object itself.

Use this method when you want to get the index of an object matching the specific condition.

To find the value in an array of objects using the findIndex() object,

• Invoke the findIndex() object in the array method
• Using the arrow method, pass the condition to find the object

Code

    let birdsObj = [{
     id: '100',
     name: 'owl'
    }, {
        id: '101',
      name: 'dove'
    }, {
        id: '102',
      name: 'parrot'
    }];

    const id = '101 ';

    var birdIndex = birdsObj.findIndex(bird => bird.id === id);

    console.log("Index of Id 101 : "+birdIndex);

    console.log(birdsObj[birdIndex]);

Output

"Index of Id 101 : 1"
{ id: "101”, name: "dove" }

Using Filter() Method

The filter method returns a shallow copy of the array with the elements that pass the specified condition.

Use this method when the array might contain one or more matching elements, and you want to find all the elements and return them in an array.

To find the values in an array of objects using the filter() method,

• Invoke the filter() method in the array object
• Using the arrow function to pass the condition to find the object
• All the matching objects will be returned in the new array

Code

 let birdsObj = [{
  id: '100',
  name: 'owl'
}, {
  id: '101',
  name: 'owl'
}, {
  id: '102',
  name: 'parrot'
}];

const birdName = 'owl';

var bird = birdsObj.filter(bird => bird.name === birdName);

console.log(bird);

Output

[
  { id: "100", name: "owl" }, 
 { id: "101", name: "owl" }
 ]

Using For Loop

One of the traditional ways to find an object from an array is by iterating the array using the for loop.

During each iteration,

• Check if the object property value is equal to your desired value
• Return the object if the condition is True

Code

    let birdsObj = [{
     id: '100',
     name: 'owl'
    }, {
        id: '101',
      name: 'dove'
    }, {
        id: '102',
      name: 'parrot'
    }];

    const id = '100';

    for (var i = 0, len = birdsObj.length; i < len; i++) {

        if(birdsObj[i].id === id){

          console.log(birdsObj[i]);

          break;

        }
    } 

Output

Here, the JavaScript object array is iterated using the for loop, and a condition(birdsObj[i].id === id) is added to check for a matching id value.

    { id: "100", name: "owl" }

Additional Resources

• How to Check If an Array Contains an Object With a Specific Property Value in JavaScript
• How To Get an Object From An Array Of Objects By Property Value in JavaScript