How To Find an object by id in an array of Javascript Objects – Definitive Guide?

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

Javascript arrays allow storing a collection of multiple objects under a single name.

You can find an object by id in an array of JavaScript objects using array.find(item => item.id === 'idValue') function.

Basic Example

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

    var bird = birdsObj.find(bird => bird.id === '100');
    console.log(bird);

Output

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

This tutorial teaches you the different methods to find object by id in an array of objects in JavaScript and when it is appropriate to use each method

Using Find() Method

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

If no value meets the condition, undefined is returned.

To get the object by its id and 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

Use this method when you want to get the complete object using its id.

Code

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

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

    const id = '100';

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

    console.log(bird);

Output

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

Using Lodash Find() method

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

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

    const id = '100';

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

         return obj.id == id;

    });

    console.log(birdObj);

Output

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

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, which also accepts a function with a condition to match a specific id.

To find the index of an object with specific id,

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

Use this method if you want to get the index of an object using the object’s id.

Code

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

    const id = '100';

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

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

    console.log(birdsObj[birdIndex]);

Output

    "Index of Id 100 : 0"
    { id: "100", name: "owl" }

Using Filter() Method

The filter method returns a new array based on the elements that get passed through the filter condition.

To get the object(s) with specific ids using the filter() method,

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

Use this method when you want to create a new array with the matching objects.

Code

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

    const id = '100';

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

    console.log(bird);

Output

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

Using For Loop

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

During each iteration,

  • Check if the object id is equal to your desired id
  • 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 for loop and a condition(birdsObj[i].id === id) is added to check for matching id value.

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

JSfiddle

This tutorial is available in this JSFiddle.

Additional Resources

Leave a Comment