{

Multiple ways to Print array of objects in Angular with example?


This tutorial shows multiple ways to print the array of objects. One way is using json pipe in Angular. Another way using object property notation

For example, We have an array of objects declared in typescript component in Angular

  roles: { id: number, name: string }[] = [
    { "id": 0, "name": "admin" },
    { "id": 1, "name": "user" },
    { "id": 2, "name": "superadmin" }
  ];

prints the object using angular template syntax in HTML

{{roles}}

Would print a list of [object Object] in UI as seen below.

 [object Object],[object Object],[object Object]

using ngFor directive, We will print the object

  <ul>
    <li *ngFor="let role of roles">{{role}}</li>
</ul>

Outputs displayed on UI

[object Object]
[object Object]
[object Object]

How do you print the object to screen or browser to console?

using json pipe in Angular

Angular has inbuilt json pipe that prints beautify of json code.

In Html code, json pipe is used as below.

{{roles|json}}

And prints json

[ 
    { "id": 0, "name": "admin" },
    { "id": 1, "name": "user" }, 
    { "id": 2, "name": "superadmin" } 
]

Another way is to iterate with ngFor and print an object

<ul>
    <li *ngFor="let role of roles">{{role |json}}</li>
</ul>

In Javascript, Object values can be retrieved using two syntaxes.

  • using object dot notation syntax. property is accessed using dot notation syntax as given below Syntax
object.property

Here is an example code

<ul>
    <li *ngFor="let role of roles">{{role .id}}- {{role.name}}</li>
</ul>
  • using a key with object square brackets

In this values from the object are retrieved by passing the key to square brackets.

syntax:

object["key"]

Here is an example code

<ul>
    <li *ngFor="let role of roles">{{role["id"]}}- {{role["name"]}}</li>
</ul>

In both above cases, Output as shown below

0- admin
1- user
2- superadmin

using JSON.stringify in component to print array objects

Created a getter. An array of objects are deserialized using JSON.stringify in the typescript component.

  get printroles() { return JSON.stringify(this.roles) };

Call the getter inside an HTML component.

{{printroles}}
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.