How to display JSON object using ngFor directive : Angular 9

This tutorial guides you on how to display JSON object using ngFor directive in Angular 9. In this tutorial example let’s see how to use JSON response from REST API and display data in the component’s template.

Display JSON object using ngFor directive – Angular 9

The *ngFor directive lets you to loop through the data similar to for-each loop in Java. For example, when the REST API response received is in JSON format, ngFor can be used in component’s template to display the data.

Let’s use this directive to display a dynamic list from JSON response. For example, the JSON array looks like the following example data.

jsonArray = [
		{
		  uid: '10',
		  age: 22,
		  username: 'John Paul',
		},
		{
		  uid: '11',
		  age: 35,
		  username: 'Peter Jackson',
		},
		{
		  uid: '12',
		  age: 30,
		  username: 'Will Smith',
		},
		{
		  uid: '13',
		  age: 25,
		  username: 'Peter Paul',
		},
		{
		  uid: '14',
		  age: 34,
		  username: 'Johnson Peter',
		},
		{
		  uid: '15',
		  age: 30,
		  username: 'Eric Smidth',
		},
	  ]

For instance, you wanted to output data in the HTML view that should look like below.

<ul>
  <li>John Paul, 10, 22</li>
  <li>Peter Jackson, 11, 35</li>
  <li>Will Smith, 12, 30</li>
  <li>Peter Paul, 13, 25</li>
  <li>Johnson Peter, 14, 34</li>
  <li>Eric Smidth, 15, 30</li>
</ul>

Let’s see how to display JSON object using ngFor directive i.e., render an array using ngFor in Angular 9. All you need to do is, just tell the ngFor directive, which array it needs to use.

For our example, let’s hard-code this example JSON array response in the component class file (typescript file, .ts). Therefore your component class file should look like below.

mycomponent.component.ts

import { Component } from '@angular/core';

@Component({
	
	selector:'app-mycomp',
	templateUrl:'./mycomponent.component.html',
	
})

export class MycomponentComponent {

	jsonArray = [
		{
		  uid: '10',
		  age: 22,
		  username: 'John Paul',
		},
		{
		  uid: '11',
		  age: 35,
		  username: 'Peter Jackson',
		},
		{
		  uid: '12',
		  age: 30,
		  username: 'Will Smith',
		},
		{
		  uid: '13',
		  age: 25,
		  username: 'Peter Paul',
		},
		{
		  uid: '14',
		  age: 34,
		  username: 'Johnson Peter',
		},
		{
		  uid: '15',
		  age: 30,
		  username: 'Eric Smidth',
		},
	  ]
	
}

Next, to display the JSON object, we need to use the ngFor directive in our component’s template and tell which array to use. In our example, let’s create list element for each element in the JSON array. Therefore, you need to place the ngFor directive inside the <li> tag as shown below.

Did you notice the statement “let element of jsonArray” in the ngFor syntax ? Well, it actually works in the same way as for-each loop in java. Using that let statement we define a variable called “element“, which holds the reference of the current array element.

Then we use the “element” variable to add the user’s username, uid and age to each list element.

mycomponent.component.html

<p>This is My First Component</p>

<ul>

    <li *ngFor="let element of jsonArray">{{element.username}}, {{element.uid}}, {{element.age}}</li>

</ul>

The output rendered, should look like this:

<ul>
  <li>John Paul, 10, 22</li>
  <li>Peter Jackson, 11, 35</li>
  <li>Will Smith, 12, 30</li>
  <li>Peter Paul, 13, 25</li>
  <li>Johnson Peter, 14, 34</li>
  <li>Eric Smidth, 15, 30</li>
</ul>

And don’t forget to use the component selector ‘app-mycomp‘ in your parent component (app.component.html).

app.component.html

<div class="container">
	<div class="row">
		<div class="col-xs-12">			
			<h3>My First Component !</h3> 
			<hr>
			<app-mycomp></app-mycomp>		
		</div>
	</div>
</div>

Finally, when you run the above example you should see the following output in the browser.

Output

That’s it. Hope it helped 🙂

Also See:

Display JSON object using ngFor directive – Angular 9

Output

References: