Sometimes in Angular development, you need to know where an object is located within an array. You can get that info with findIndex().
And in this ridculously brief article, I'll show you how to use it.
It's quite easy.
You Already Have It
Good news: you don't need to install any third-party modules to use findIndex(). It's native to TypeScript.
Yes, that would be the same TypeScript you're using to develop your Angular app.
In fact, findIndex() is a method like filter() and find() that you can apply to any array.
It doesn't matter what kind of objects you're holding the array, either.
So let's take a look at how you use it.
How You Use It
Let's say you have a CRM app that tracks contact status (like "Contacted," "Interested," etc.). All available statuses are contained in an array.
When you load the contact's info from the back end, the code grabs the contact's status as a string.
Well that's cool for plenty of uses. However, the code also needs to know the position of the status in the array.
Why? Because the statuses are ordered according to progress. If the UI wants to highlight the current status and darken the statuses the contact hasn't yet arrived at, it will need to know not just the name of the status, but its position in the array.
So with that in mind, you might come up with some code that looks like this:
this.contactStatusIndex = this.availableContactStatuses.findIndex(status => this.contact.status === status.value);
That code sets the contactStatusIndex variable (a number) to the position in the array where the current contact's status is located.
It does that by using the findIndex() method on the availableContactStatuses array.
Now keep in mind: findIndex() accepts a predicate as its only parameter.
In other words, it doesn't take in any object and then search for a match on that object. Instead, it leaves it up the developer (you) to write code that identifies a match.
But what's a predicate? It's a function that returns a boolean.
Yes, that's right. In this case, the parameter is a function.
So the code above checks each object in the array with a boolean test. When the boolean returns true for one of those objects, the corresponding position in the array gets returned.
In this case, the code is looking for a match between the current contact's status (this.contact.status) and the value property of one of the DropdownDisplay objects in the array (status.value).
And again, the one matches wins.
Just to drive the point home, let me go over the stuff in the parentheses once more:
status => this.contact.status === status.value
What that says is this: for each status in the availableContactStatuses array, check to see if its value property matches the status property of this.contact. If it matches, then return the current position in the iteration as the index.
Just remember: findIndex() uses 0-based indexing. So the first element in the array will be element #0.
Wrapping It Up
That's it. That's all you gotta do to use findIndex().
Now try using it in your own applications. And again, you can try it with an array of any type of object.
Just make sure you have fun!