How to Find Index of Object in JavaScript Array

September 25, 2022 | by Arround The Web | No comments

How to Find Index of Object in JavaScript Array

Sometimes when working with objects containing arrays, you will need to know the index of an object. You can employ different JavaScript methods to uniquely identify objects from their properties and then access their indices. This guide will give an extensive and comprehensive explanation of how different methods can be used to achieve this goal.

Find Index of Object with Map and indexOf() Method

The map method is used to apply a function on each item of the array, transform it and then return it inside an array. We can use this method to get specific properties of objects which we can then use to identify objects. When we identify the object that we want to know the index of we can just call the indexOf() method:

let employees = [{firstName:"John", lastName:"Doe", age:38}, {firstName:"John", lastName:"Smith", age:45}];

let ind = employees.map(item => item.age).indexOf(45);

console.log(ind);

In the above code, we first defined an array which contains two objects. The objects contain data of different employees. We then used the map function to just get the ages of employees in a separate array. Lastly, we used the indexOf() method to get the index of the object whose age property is 45 and printed it to the console. We could have used the map function to get the value of any property and get the index of the object based on that property.

JavaScript ES6 introduced a new method called findIndex(). This method is a lot more elegant, but sadly it doesn’t work on old browsers.

Find Index of Object With findIndex() Method

The findIndex() method takes a function containing a test as an argument and applies it to each element of the array without making any changes to the original array. It then returns the position of the array element or -1 if no element passes the test. With the use of the findIndex() method we do not have any need of the map() function:

let employees = [{firstName:"John", lastName:"Doe", age:38}, {firstName:"John", lastName:"Smith", age:45}];

let ind = employees.findIndex(item => { return item.age == 45});

console.log(ind);

The findIndex() method can also take the index of the current element and the array of current element as optional arguments.

We have used arrow functions in both of the above examples to make the code more readable but the default function syntax can also be used as the argument to these functions:

let employees = [{firstName:"John", lastName:"Doe", age:38}, {firstName:"John", lastName:"Smith", age:45}];

let ind = employees.findIndex(function(item) { return item.age == 45});

console.log(ind);

Conclusion

This comprehensive tutorial gives two different methods of finding the indices of Objects in JavaScript based on the values of their properties. The findIndex() method applies the conditional function to each element of the array itself and then returns the index of the element which passes the condition. But when we are using the indexOf() method, we also have to use the map() method to get the property values.

Source: linuxhint.com