How to get the index of an Object in an Array in JavaScript

Get the index of an Object in an Array

Find the index of an Object in an Array, by a specific property using findIndex() method.

To find the index of an object in an array by a specific property:

1. Use the findIndex() array method.
2. Check if each object has a property with a specific value.
3. The find() method returns the first element in the provided array that satisfies the provided testing function.

Example –

const theArray = [{id: 'a'}, {id: 'b'}, {id: 'c'}];

const index = theArray.findIndex(object => {
  return object.id === 'b';
});

console.log(index);

Here’s what the above code is doing:

1. We create an array of objects.
2. We call the findIndex() method on the array.
3. We pass in a callback function that takes an object as an argument.
4. We return the object’s id property.
5. We log the index of the object with the id of ‘b’ to the console.

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

In the example above, the findIndex() method returns 1, because the first element in the array that satisfies the provided testing function is the object with the id of ‘b’.

The findIndex() method is similar to the indexOf() method, but the findIndex() method returns the index of the first element that satisfies the provided testing function, whereas the indexOf() method searches the array for the provided element and returns its position.

The findIndex() method executes the callback function once for each index of the array until the callback returns a truthy value. If so, findIndex() returns the index of the first array element where the callback returns a truthy value. Otherwise, it returns -1.

The callback function accepts three arguments:

1. The value of the element.
2. The index of the element.
3. The array object being traversed.

The findIndex() method does not mutate the array on which it is called.

ℹ️ If you want your code to work in Internet Explorer, you can’t use the findIndex() method. Instead, use the next approach described in this article.

Find the index of an object in an array, by a specific property using map() and indexOf() method.

To find the index of an object in an array, by a specific property:

1. Use the map() method to the array, to return only the value of the relevant property.
2. Call the indexOf() method on the array that is returned from the map() method.
3. The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Example –

const theArray = [{id: 'a'}, {id: 'b'}, {id: 'c'}];

const index = theArray.map(object => object.id).indexOf('c');

console.log(index);

Here’s what the above code is doing:

1. We create an array of objects.
2. We use the map() method to create a new array with the id property of each object.
3. We use the indexOf() method to find the index of the object with the id of ‘c’.

theArray.map() is using the array method .map(), which creates a new array by passing each element in the initial array to a callback function, which returns the new element to be added to the array. This means that rather than passing the whole object, we can add just its property of interest, as a separate variable, leaving the original variable untouched.
.indexOf() is an array method that checks each element in the array for equality to the input value. So in the above example we’re checking each element returned from the .map() for equality to that specified in the argument, which is ‘c’.

Note – The .map() method preserves the ordering of the array’s elements, so the ordering of the values and objects is the same.

ℹ️ This solution is not as good as the findIndex() one. However, it works if you have to support Internet Explorer.