Frustrated because you're getting some output like "[object Object]" when you try to log objects in your Angular app? Need to see some real debug code?

If so, then you'll be glad you got here from your favorite search engine.

Cuz I'm gonna show you how to log info about complex objects with very tight code.

Let's get started.

The Old Comma Trick

Sometimes, you want to see all the properties for a complex object. But if you log it with something like this:

console.log("My complex object is " + myComplexObject);

You'll end up with this:

My complex object is [object Object]

And that's not what you want. Or you wouldn't be here.

One way you can get around that is by not concatenating the object to the end of a string. In other words, just log it like this:

console.log(myComplexObject);

But that's not a great solution if you've got a whole bunch of logging going on. It might be difficult to tell what's what.

In other words, you really need some text in front of that object.

So use the old comma trick. 

Do that by including a comma to "concatenate" the string and the object instead of a plus sign. It works like this:

console.log("My complex object is ", myComplexObject);

That will give you the output you're looking for. You'll see some really pretty JSON in the console log.

What About in the UI?

But maybe you don't just want to log objects in the console. You want to display them via the template.

One way you can make that happen is via the json pipe.

Let's say you're developing a CRM application. And, for whatever reason, you want to display the JSON version of a contact.

You can do that with code that looks like this:

<div>
  {{ contact | json}}
</div>

Note the json pipe after contact. That will display something that looks like this:

{ "id": "601415", "firstName": "Lucy", "lastName": "Cheng", "email": "cheng@xyzmail.com", "phones": [ { "phone": "(919) 555-1212", "phoneType": "WORK", "countryCode": "us" } ], "addresses": [ { "street1": "1400 Plum Way", "street2": null, "city": "Onisius", "state": "NM", "zip": "80909", "country": null, "addressType": "HOME" } ], "source": "WALKIN", "sourceDetails": "", "status": "CUSTOMER", "statusChange": 0, "linesOfBusiness": [ "FULL_STACK" ], "title": "Comic Relief", "authority": true, "salesOwner": { "id": "6032", "firstName": "Hilton", "lastName": "Jones", "email": "hilt@xyzmail.com", "username": "hilt", "phoneNumber": "474-555-1212" }, "account": { "id": "609034", "name": "International Business", "address": null, "phone": null, "industry": null, "description": null, "numberOfEmployees": null, "stockSymbol": null, "annualRevenue": null, "status": null, "source": null, "phoneNumber": "474-555-1212" } }, "timezone": "Africa/Accra", "tags": [ "conference", "repeat" ], "canCall": true, "canText": true, "canEmail": true, "birthdayMonth": "January", "birthdayDay": 1, "notes": null }

But you won't get that JSON if you leave out the json pipe. Instead, you'll end up with the dreaded [object Object] thing again.

The keyvalue Pipe

If you'd like to add some neat formatting, you can use the keyvalue pipe. Try it like this:

  <div *ngFor="let item of contact | keyvalue">
    {{ item.key }} = {{ item.value | json }}
  </div>

Pay attention to that keyvalue pipe in the *ngFor directive. That's going to give you an array of key/value items.

Each key in the list is a property in the contact object. And each value is the value of the associated property.

Note that you need to pipe item.value to json just like you saw before. That's because some property values can be complex objects. If you don't include the pipe, well... you know what happens by now.

The code above will show you the value of each property in the contact object on a new line. It looks something like this:

authority = true
birthdayDay = 1
birthdayMonth = "January"
canCall = true
canEmail = true
canText = true
email = "cheng@xyzmail.com"
firstName = "Lucy"
id = "60195"
lastName = "Cheng"
linesOfBusiness = [ "FULL_STACK" ]
notes = null
phones = [ { "phone": "(919) 555-1212", "phoneType": "WORK", "countryCode": "us" } ]
...

That's just an abbreviation. But you get the idea.

Wrapping It Up

Now you know what you're doing when it comes to doing this.

It's up to you to take what you've learned in this guide and make it your own.

Have fun!

Photo by Vitaly Vlasov from Pexels