AngularJS is a powerful JavaScript framework that makes it easy to build dynamic web applications. One of the common tasks in modern web applications is consuming data from RESTful APIs, often in the form of JSON. This article will walk you through the steps to consume JSON APIs in an AngularJS application.

Prerequisites

• AngularJS
• Angular CLI

Approach

Step 1: Do the necessary imports for HttpClient in the component.ts file.

import { HttpClient } from '@angular/common/http';

export class AppComponent implements OnInit {
       data: DataItem[] = [];

       constructor(private http: HttpClient) { }
    }
}

Step 2: We get Response from API by passing the API URL in get() method and then subscribing to the URL.

this.http.get('API url').subscribe(parameter)

The Response of the API is stored in a variable from which data can be accessed.

Step 3: Now data array needs to be shown using HTML. A Table is used in which rows are added dynamically by the size of the data array. For this, rows are created using *ngFor then data is shown from each row.

Here you will need an API for getting data. A fake API can also be created and data can be stored.

Steps to Consuming JSON APIs in AngularJs

Step 1: Create a reactJS application by using this command

ng new JSONAPI

Step 2: Navigate to project directory and make changes in the file according to given code.

cd JSONAPI

Project Structure

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Example

<!-- app.component.html -->

<div>
    <h1>Data from API</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Completed</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of data">
                <td>{{ item.id }}</td>
                <td>{{ item.title }}</td>
                <td>{{ item.completed }}</td>
            </tr>
        </tbody>
    </table>
</div>

//app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Observable } from 'rxjs';

interface DataItem {
    id: number;
    title: string;
    userId: number;
    completed: boolean;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: true,
    imports: [CommonModule, HttpClientModule]
})
export class AppComponent implements OnInit {
    data: DataItem[] = [];

    constructor(private http: HttpClient) { }

    ngOnInit() {
        this.getData().subscribe(
            (response) => {
                this.data = response;
                console.log(response);
            },
            (error) => {
                console.error('Error fetching data:', error);
            }
        );
    }

    getData(): Observable<DataItem[]> {
        return this.http.get<DataItem[]>('https://jsonplaceholder.typicode.com/todos/');
    }
}

Command to run this Project:

ng serve

Output

How To Consuming JSON APIs in AngularJS Application