Yes, you can iterate through each property in any given object in your Angular app even if you don't know the names of the properties.

And in this guide, I'll show you how to do it.

But Why Would You Want to Do It?

Before we get into the "how," let's get into the "why."

As in: why would you even want to do this?

You'll often find it's useful when you have to manually validate a form. Rather than itemizing each field by name, you can just use forEach to iterate through all fields. Then you can invoke updateValueAndValidity() on each field to check if it's valid. 

If the field isn't valid, then obviously the form isn't valid. And your code can notify the user to take corrective action.

There are other use cases I'm sure. But that's probably one of the more popular situations.

Now let's get into the "how."

How

For testing purposes, let's say we've got this any object:

foo: any = { firstName: 'Joe', lastName: 'Blow', age: 31 };

It's got no interface associated with it. So your IDE probably won't do any autocomplete when you type out this.foo.

At least mine doesn't (Microsoft Visual Studio).

But remember: that's just for testing purposes. In a real-world scenario, your code might get an object back from a downstream service that could have a variety of unknown properties.

That's not an ideal situation, by the way. But it sometimes happens.

In that case, you might find it best to iterate through the fields programmatically and extract just the ones that you need.

Here's how to do that:

    Object.keys(this.foo).forEach(prop => {
      console.log(prop);
      console.log(this.foo[prop]);
    });

It starts with Object.keys(). That keys() method returns an array of strings. Each string in the array represents the name of a property in the object.

Well, now that you've got an array, you can process it just like any other array. The code above uses the forEach() method.

Then it's just a matter of outputting the results.

The first console.log() line outputs the name of the property.

But how do you get the property value? Happily enough, you can do that similarly to how you access a specific element within an array: with the aid of square braces.

So this.foo['firstName'] will give you the value of the firstName property in the object. In this case, that's "Joe."

The code above uses a variable (prop) for that purpose because it's iterating through all properties.

Now you can run that code in one of your test components, you should see some output like this:

firstName
Joe
lastName
Blow
age
31

By the way: I put the output code in the ngOnInit() method. That's a useful place to put stuff for testing purposes.

Also: that output is exactly right. So the iteration works as expected.

Wrapping It Up

There you have it: a simple way to iterate through an object's properties even if you don't know anything about that object.

You can do something like that in any Angular app.

Feel free to take what you've learned about here and apply it to suit your own requirements.

Have fun!

Photo by George Becker from Pexels