How to Loop through array of JSON object with *ngFor in Angular ?
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" >w3wiki</ 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 > |
Javascript
// 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" } ] } ] } |
Javascript
// 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" >w3wiki</ 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 > |
Javascript
// 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); } } |
Javascript
// 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:
Contact Us