How To Get an Object From An Array Of Objects By Property Value in JavaScript – Definitive Guide

Published on: | Last updated on: January 11, 2023 | By:

JavaScript objects contain multiple properties in it.

You can get an object from an array of objects by property value in JavaScript using the array.find(obj => obj.name === objvalue) statement.

Basic Example

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

const birdName = 'owl';

var birdObject = birdsObj.find(bird => bird.name === birdName);

console.log(birdObject);

Output

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

This tutorial teaches you how to get an object from an array of objects using object property value in JavaScript and when it is appropriate to use each method.

Using Find

The find() method returns the first matching element that matches the passed condition.

If no elements are matched, undefined is returned.

To find an object from an array of objects by property value,

  • Invoke the find() method in the array object
  • Using the arrow function, check if the property of the object is equal to your desired value
  • If a match is found, then the object is returned, and the other elements are not checked

Use this method when you want to find the first matching element with the specific value in the object property.

Code

The following method gets the object with the name owl.

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

const birdName = 'owl';

var birdObject = birdsObj.find(bird => bird.name === birdName);

console.log(birdObject);

Output

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

Using Filter

The filter() method creates a shallow copy of the array with the elements that pass the specific function.

It returns an empty array when no elements match the test function.

To get the object from an array of objects by its property value,

  • Invoke the filter() method in the array object
  • Using the arrow function, check if the property of the object is equal to your desired value
  • An array is returned with all matching objects

Use this method when you want to get all objects as an array from the array of objects with a specific value property.

Code

The following code demonstrates how to get the object with its name owl.

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

  const birdName = 'owl';

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

  console.log(birdObj);

Output

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

Using Lodash JS Find

The lodash library provides many useful methods to perform various operations with a modular approach and better performance practices.

It also provides the find() method to find an object from an array of objects.

To find the object based on a property value,

  • Use the find() method and pass the array
  • Create an inline condition to check the desired condition
  • Return the object if the condition is passed

Code

The following code demonstrates how to use the lodash find() method to find the object with a specific property value.

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

    const birdName = 'owl';

    var birdObj = _.find(birdsObj, function(obj) {

      return obj.name == birdName;

    });

    console.log(birdObj);

Output

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

Additional Resources

Leave a Comment