So you're working on an Angular application and need to iterate over an array?
No worries. I'll show you how to do it here.
In fact, I'll show you not one (1) but two (2) ways to do it.
Let's get this ship sailing.
Using forEach
When it comes to looping over an array, most of the cool kids use forEach. That's because it helps you keep your code a little more concise.
And, quite frankly, you look like you know what you're doing when you use forEach.
Let's assume you're developing a CRM app and you're working on a feature that requires you to iterate over an array of Contact objects. Here's how you can make that happen:
contacts.forEach(contact => console.log(contact.firstName + " " + contact.lastName));That will print the first and last name of all the contacts to the log.
That forEach() method that you see accepts a single parameter: a function.
If you don't do a whole lot of monkeying around with TypeScript of JavaScript, you might not be too familiar with methods that accept functions as parameters.
But that's what's happening here.
In the case of forEach, the code will execute that function for each and every element in the array.
So if you want to do something with each and every element in the array, all you need to do is create a function that does that something.
There are a few ways to create functions:
- Arrow functions
- Callback functions
- Inline functions
The example you see above is an arrow function. It's the best choice when the processing isn't overly complicated.
I'll cover the other two types of functions in separate articles. But for now, let's focus on the arrow function.
And yes, that is a function inside the parentheses. It's defined in shorthand style, though.
The part in front of the arrow is the function's parameter. In this case, it's a Contact object that represents a single element in the array.
You can think of it like a method parameter. It's really the same thing.
After the arrow is the function itself. Since it's a one-liner, I've opted not to include curly braces. But you could write that function like this as well:
contacts.forEach(contact => {
console.log(contact.firstName + " " + contact.lastName);
});That's helpful if you've got a few lines of code.
If you've got several lines of code, though, it might be a good idea to look at using a callback function instead.
Anyhoo, the only processing going on in that code block above is writing the contact's name to the console.
So that's one way to iterate over an array.
The For Loop
Ah, yes. The for loop.
It's been around since the Dark Ages of programming languages. But it's still a useful mammal.
With the for loop, you just iterate over all elements by grabbing each one according to its position in the array. Let's look at an example:
for (let i = 0; i < contacts.length; i++) {
let contact: Contact = contacts[i];
console.log(contact.firstName + " " + contact.lastName);
}That will accomplish the same thing as the last two blocks of code.
But, as you can see, it's a wee bit more verbal. That's why the cool kids like forEach.
To use that method, you have to know the length of the array. That's how you create the for loop.
The good news is that you can easily get the length of the array with the .length property. That makes the iteration possible.
Unlike the previous example, though, you don't have an automatic instantiation of a Contact object. So you have to create one yourself by grabbing an object from the array. That's what happens in the second line of code.
The third line of code just does the logging you've seen before.
Wrapping It Up
Yep. It's that easy to iterate over arrays in your TypeScript code.
Now take what you've learned here and make it your own. Update your code to use either one of the methods above to iterate over your array.
Have fun!