Find the Index of an Object in an Array using JavaScript

When we need to find the index of an element in an array, the first thing that comes to our mind is the Array.indexOf() method. The indexOf() method returns the index of the first matching element in the array, or -1 if the element doesn’t exist.

For example:

const fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

console.log(fruits.indexOf('Mango'));
// Output: 2

console.log(fruits.indexOf('Grapes'));
// Output: -1

But, the indexOf() method doesn’t work if the items of the array are objects. It only works when the element we want to search in the array is a primitive data type such as a string, or number not a non-primitive data type such as an array or object.

See the following example:

const students = [
    { rollNo: 1, name: 'John' },
    { rollNo: 2, name: 'Dan' },
    { rollNo: 3, name: 'Gilbert' },
    { rollNo: 4, name: 'Dave' },
    { rollNo: 5, name: 'Ivan' },
];

let index = students.indexOf({ rollNo: 3, name: 'Gilbert' });

console.log(index);
// Output: -1

As you can see, the student with the name Gilbert exists in the students array, still, the indexOf() method returns -1. It will always return -1 if you try to find any student in the array.

To solve this problem, a new Array method Array.findIndex() is introduced in ES6.

Find the Index of an Object in an Array using the findIndex() Method

The Array.findIndex() method is a higher-order method. In JavaScript, a higher-order function/method is a function that either takes another function as an argument or returns a function.

The findIndex() method takes a callback function as an argument. This callback function one by one runs on each array item.

If the current item satisfies the condition written inside the callback function, the findIndex() method returns its index in the array. If no array item satisfies the condition, the findIndex() method returns -1.

The following example searches for the object in the array that has the student’s roll number equal to 3 and returns its index if any object matches.

const students = [
    { rollNo: 1, name: 'John' },
    { rollNo: 2, name: 'Dan' },
    { rollNo: 3, name: 'Gilbert' },
    { rollNo: 4, name: 'Dave' },
    { rollNo: 5, name: 'Ivan' },
];


let index = students.findIndex(function(student){
    return student.rollNo === 3;
});

console.log(index);
// Output: 2

We can also write a shorter version of the callback function using an arrow function. This will also work the same(considering the above example):

let index = students.findIndex(student => student.rollNo === 3);

console.log(index);
// Output: 2

Find the Index of an Object in an Array using a For Loop

We can also find the index of an object by running a regular for loop on the given array and one by one comparing if the given key-value matches with any object’s key-value.

The following example returns the index of the first matching student whose roll number is same as the given roll number. If no match is found, it returns -1.

const students = [
    { rollNo: 1, name: 'John' },
    { rollNo: 2, name: 'Dan' },
    { rollNo: 3, name: 'Gilbert' },
    { rollNo: 4, name: 'Dave' },
    { rollNo: 5, name: 'Ivan' },
];

let index = -1;
let givenRollNo = 3;

for(let i = 0;i < students.length;i++){
    
    // Check if current roll no. is same as given roll no.
    if(students[i]['rollNo'] === givenRollNo){
        index = i;
        break;
    }
    
}

console.log(index);
// Output: 2

Find the Index of an Object in an Array using the Map() Method

We can also use the Array.map() method to find the index of an object by a specific key.

The map() method takes a callback function as an argument and returns a new array based on the code written inside the callback function.

In the following example, the map() method returns an array that contains the roll number of each student in the same order as the students array.

After that, we used the indexOf() method to get the index of the given roll number.

const students = [
    { rollNo: 1, name: 'John' },
    { rollNo: 2, name: 'Dan' },
    { rollNo: 3, name: 'Gilbert' },
    { rollNo: 4, name: 'Dave' },
    { rollNo: 5, name: 'Ivan' },
];

// Returns an array containing each roll no.
const rollNoArr = students.map(student=>student.rollNo);

let givenRollNo = 3;

let index = rollNoArr.indexOf(givenRollNo);
console.log(index);  // 2

Conclusion

In this article, we learned three ways to find the index of an object in an array.

The first approach is to use the Array.findIndex() method. The findIndex() method returns the index of the first matching element based on the code written in its callback. If no element satisfies the condition, it returns -1.

The second approach is to run a regular for loop over the entire array and check if the current element matches the given condition. If yes, get the index value and break the loop. If no item matches, set the index to -1.

At last, we used the Array.map() method to find the index of an object by a specific key. In this method, we first create a new array based on the key we want to search the object and then use the Array.indexOf() method to get the index of the object.

Thanks for reading.