How to Loop through array of JSON object with *ngFor in Angular ?
Last Updated :
28 Apr, 2025
JavaScript Object Notation (JSON) is a text-based, human-readable interchange format used for representing simple data structures and objects in web browser-based code. In order to Loop through an array of JSON objects, the *ngFor directive can be utilized that helps to dynamically generate HTML content based on the data in those objects. For instance, we have an array of JSON objects, shown below:
[
{
"name": "Java",
"feature": [
{
"name": "ObjectOriented"
},
{
"name": "Abstraction"
},
{
"name": "Encapsulation"
}
]
},
{
"name": "HTML",
"feature": [
{
"name": "FrontEnd"
},
{
"name": "Styling"
}
]
}
]
These JSON objects are in the form of key-value pairs and are also present in nested JSON format. In this article, we will learn How to iterate over these Array of JSON objects/ nested JSON objects using ngFor Directive in Angular.
Creating Angular application & Module Installation
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Project Structure
It will look like the following:
Example 1: In this example, we will iterate through an array of JSON objects and display them in a list.
HTML
<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
Loop through array of
JSON object with *ngFor
</h2>
<div *ngFor="let item of gfg ">
{{item.name}}
<ul>
<p *ngFor="let element of item.feature">
<li>{{element.name}} </li>
</p>
</ul>
</div>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { KeyValue } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: "./app.component.html",
styleUrls: ['./app.component.css']
})
export class AppComponent {
gfg = [
{
"name": "Java",
"feature": [
{ "name": "ObjectOriented" },
{ "name": "Abstraction" },
{ "name": "Encapsulation" }
]
},
{
"name": "HTML",
"feature": [
{ "name": "FrontEnd" },
{ "name": "Styling" }
]
}
]
}
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { HttpClientModule }
from '@angular/common/http';
import { AppComponent }
from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Output:
Example 2: In this example, we will use the function Object.Keys() and get the values of the keys and then iterate over them.
HTML
<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
Loop through array of JSON
object with *ngFor
</h2>
<div *ngFor="let item of keys() ">
{{item[1].name}}
<ul>
<li *ngFor="let element of item[1].feature">
{{element.name}}
</li>
</ul>
</div>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { KeyValue } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: "./app.component.html",
styleUrls: ['./app.component.css']
})
export class AppComponent {
gfg = [
{
"name": "Java",
"feature": [
{ "name": "ObjectOriented" },
{ "name": "Abstraction" },
{ "name": "Encapsulation" }
]
},
{
"name": "HTML",
"feature": [
{ "name": "FrontEnd" },
{ "name": "Styling" }
]
}
]
keys(): Array<any> {
console.log(Object.entries(this.gfg))
return Object.entries(this.gfg);
}
}
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { HttpClientModule }
from '@angular/common/http';
import { AppComponent }
from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Output:
Similar Reads
How to Loop through Object with *ngFor in Angular ? JSON stands for JavaScript Object Notation. It is a format for structuring data. This format is used by different web applications to communicate with each other. In this article, we will learn Loop through Object with *ngFor in Angular. Table of Content Steps for Installing & Configuring the An
3 min read
How to limit the ngFor Loop to Two Iterations in Angular ? The NgFor is used as a structural directive that renders each element for the given collection each element can be displayed on the page. In this article, we will learn how to Limit the ngFor loop to two iterations. Table of Content Steps for Installing & Configuring the Angular ApplicationProje
3 min read
How to use forEach with an Array of Objects in JavaScript ? Using the forEach() method with an array of objects in JavaScript is essential for iterating over collections and performing operations on each object. This guide explores effective techniques to utilize forEach() for array manipulation, enhancing your coding skills. Syntax: array.forEach( function(
3 min read
How to Register Services with the Providers Array in Angular? To register services with the provider's array in Angular, you first generate a service using the Angular CLI. Then, you can register the service in the providers array within the module (app.module.ts) or component where the service is needed. Once registered, the service can be injected into any c
3 min read
How to limit ngFor repeat to some number of items in Angular ? In AngularJS, we can use the ngFor directive to loop over a list of items and display them on a webpage. Although, there could be some cases where we don't want to use all the elements in the list but want to display only a limited number of initial items, or the paginated items from the list. In th
3 min read
How to Sort an Array of Objects by String Property value in Angular ? An Object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. In this article, we will learn how to Sort an array of objects by string property value in Angular. He
3 min read