How to iterate over JSON object fetched from API in Angular ?

Last Updated : 01 Aug, 2024

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. It is the replacement of the XML data exchange format. In this article, we will learn How to Iterate over JSON objects fetched from API in Angular.

Installing & Configuring the Angular Application

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:

z132

Example 1: In this example, we will call a public API, & once the promise is resolved, & then we will store the value of this promise in a variable called promiseValue. Here we will iterate over a single object and display it in HTML

HTML

<!-- app.component.html -->
<div>
    <h2 style="color:green">GeeksforGeeks</h2>
    <h2>How to Iterate over JSON object fetched
        from API in Angular ?
    </h2>

    <p><strong>ID:</strong> {{ promiseValue.id }}</p>
    <p><strong>Title: </strong>{{ promiseValue.title }}</p>
    <p><strong>Body: </strong>{{ promiseValue.body }}</p>
</div>

JavaScript

// app.component.ts
import { Component, OnInit } 
    from '@angular/core';
import { HttpClient }
    from '@angular/common/http';

@Component({
    selector: 'app-root',
    templateUrl: "./app.component.html",
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    promiseValue: any;
    constructor(private http: HttpClient) { }

    ngOnInit() {
        this.http.get(
            'https://...example.com').subscribe(
                (result) => {
                    this.promiseValue = result;
                }
            )
    }
}

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:

Recording-2023-10-23-at-234609

Example 2: In this example, we will fetch many objects from API, & iterate over them, and display them in HTML.

HTML

<!-- app.component.html -->
<div>
    <h2 style="color:green">GeeksforGeeks</h2>
    <h2>
          How to Iterate over JSON object 
        fetched from API in Angular ?
      </h2>

    <ol>
        <li *ngFor="let result of promiseValue">
            <p>Title : {{result.title}}</p>
            <p>Album name: {{result.title}}</p>
        </li>
    </ol>
</div>

JavaScript

// app.component.ts
import { Component, OnInit }
    from '@angular/core';
import { HttpClient } 
    from '@angular/common/http';

@Component({
    selector: 'app-root',
    templateUrl: "./app.component.html",
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    promiseValue: any;

    constructor(private http: HttpClient) { }

    ngOnInit() {
        this.http.get(
            'https://...example.com').subscribe(
                (result) => {
                    this.promiseValue = result;
                }
            )
    }
}

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:

How to fetch data from a local JSON file in React Native ?

nikitamehrotra99

Improve

Article Tags :

How to iterate over JSON object fetched from API in Angular ?

Installing & Configuring the Angular Application

Project Structure

Similar Reads

Thank You!

What kind of Experience do you want to share?