Find an object by property in an array of objects javascript

Find an object by property in an array of objects javascript

In javasript, You have array of objects, that you want to find an object based on property value and return it.

Multiple ways to check and find a property value in an array of objects.

  • for loop iteration, check each object property contains a value.
  • Get Index using ES6 findIndex method with arrow function, array.findIndex(item => item.property == 'givenvalue')], retrieve array element using array[index].
  • Array find method, example,array.find((item)=>{item.name === 'Andrew'});
  • Array filter similar to find a method,array.filter((item)=>{item.name === 'andrew'});
  • jquery grep or map function
  • Underscore find function

Javascript examples to find an object by key from an array of objects.

let’s declare an array of objects and each object contains an id and name properties.

let emps = [
  {
    id: "1",
    name: "john",
  },
  {
    id: "2",
    name: "eric",
  },
  {
    id: "3",
    name: "mark",
  },
  {
    id: "4",
    name: "andrew",
  },
];

There are multiple ways we use to search an array of objects for a given property value.

How to find an object by property in an array of objects using for loop in javascript

This example does not use any array methods to find an object from an array.

  • Function declared getObjectByKey, takes parameters an array, and object key and value.
  • use for loop to iterate objects in an array
  • Each object is checked with the given key and value using the equality operator(===)
  • if matched, returns an object, else Returns null.

Here is an example

function getObjectByKey(array, key, value) {
  // Iterate an array
  for (var i = 0; i < array.length; i++) {
    // check given value found
    if (array[i][key] === value) {
      return array[i];
    }
  }
  return null;
}

console.log(getObjectByKey(emps, "name", "eric")); //{ id: '2', name: 'eric' }
console.log(getObjectByKey(emps, "name", "eric")); //{ id: '2', name: 'eric' }

How to find an object by property in an array of objects ES6 findIndex method

ES6 provides a findIndex method in Array. It returns an index for the matched callback function. Once the index is found, retrieve an element from the array using array[index]. Here is an example code

console.log(emps[emps.findIndex((item) => item.name == "eric")]); //{ id: '2', name: 'eric' }

How to find an object by property in an array of objects using javascript find a method

The array has the find method to return an object.

The find method accepts the callback function, checks for object value, and returns it.

This is an example of the ES5 javascript version.

var output = emps.find(function (item) {
  return item.name === "andrew";
});
console.log(output); // { id: '4', name: 'andrew' }

Also, the above function rewrites using ES6 arrow functions with lesser code.

console.log(emps.find((item) => item.id === "1")); //{ id: '1', name: 'john' }

How to find an object by property in an array of objects using javascript filter method

The array filter method does filter from the input array and returns the output as an array.

ES5 Array filter example:

var output = emps.filter(function (item) {
  return item.name === "mark";
});
console.log(output); //[ { id: '3', name: 'mark' } ]

ES6 Array filter example:

let tempArray = emps.filter((item) => item.id === "4");
console.log(tempArray); //[ { id: '4', name: 'andrew' } ]

console.log(emps.find((item) => item.id === "1"));

As you saw the, find method returns a single object, and the filter method returns an array of objects.

How to find an object by property in an array of objects using jquery grep function

if you are using jquery in your application, it is very easy to filter an element with the grep method.

var output = $.grep(emps, function (item) {
  return item.id == 3;
});
console.log(output); // { id: '3', name: 'mark' }

Similarly, With the map method in jquery, iterates an array of objects with a callback and returns matched objects in the array.

var tempArray = $.map(emps, function (element) {
  return element.id == 3 ? element : null;
});
console.log(tempArray); // { id: '3', name: 'mark' }

How to find an object by property in an array of objects using Underscore find a method

Similarly, the Underscore library provides a find method.

If you use the underscore library, finding an object from the array is straightforward.

It provides the findWhere method which accepts an array and an object that contains a key and value.

var output = _.findWhere(emps, {
  id: 3,
});
console.log(output); // { id: '3', name: 'mark' }

Similarly, It provides a find method.

output = _.find(emps, function (item) {
  return item.id == "3";
});
console.log(output); // { id: '3', name: 'mark' }