Fetch data from JSON using HttpClient in Angular 15

As I said in my previous post, I am here to share what I learn with the hopes others who are also on the path of learning will find it useful and helpful.

The other day I started developing an app and wanted to fetch data from JSON, so that I don't have to create backend part with connection to database. And here is a guide how you can fetch data from JSON in Angular 15.

Let's start:

1. CREATE A PROJECT

Create an app using NPM or use StackBlitz Angular project.

2. CREATE JSON FILE

Inside assets/data folder create a data.json file and you can use any structure you like or want to use to practice. Here is what my JSON file looks like.

{
  "one": {
    "name": "Title for One",
    "image": "https://as1.ftcdn.net/v2/jpg/05/73/34/56/1000_F_573345670_BCRyuEIVJMDZZOuJgbi2GDMxOyxWcr7p.jpg",
    "description": [
      "Some description of One",
      "Some description of One",
      "Some description of One",
      "Some description of One"
    ]
  },
  "two": {
    "name": "Title for Two",
    "image": "https://as1.ftcdn.net/v2/jpg/04/90/51/96/1000_F_490519696_8s6Vun3SKBcvGIABSNH1xhfMAloubVJE.jpg",
    "description": [
      "Some description of Two",
      "Some description of Two",
      "Some description of Two",
      "Some description of Two"
    ]
  },
  "three": {
    "name": "Title for Three",
    "image": "https://as1.ftcdn.net/v2/jpg/04/57/88/18/1000_F_457881854_lLMVVJes5MgCv74Hr6s2DyX3in7omdLT.jpg",
    "description": [
      "Some description of Three",
      "Some description of Three",
      "Some description of Three",
      "Some description of Three"
    ]
  }
}

I used links from the internet for the images, but you can use links for images that are placed in assets/images folder as well.

3. IMPORT HTTP CLIENT

Since Angular 15 works with standalone components you will get an error message if you try to import HttpClientModule and then import HttpClient. This is why you need to import provideHttpClient so you can use HttpClient in components and services. In main.ts add:
import { provideHttpClient } from '@angular/common/http';

In bootstrapApplication add the same in the providers array:
bootstrapApplication(App, {
providers: [provideHttpClient()],
}).catch((err) => console.error(err));

4. CREATE A SERVICE FOR FETCHING DATA
Create a service using ng g s serviceName command. I placed mine in services folder, but this is optional.
In the service import HttpClient:
import { HttpClient } from '@angular/common/http';

Inject it in the constructor:
constructor(private http: HttpClient) {}

Define a url string variable that will contain a path to the JSON file.
private url: string = 'assets/data/data.json';

Create a method to get the data:
getData(): Observable<any> { return this.http.get(this.url); }

The dataService looks like this:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';



@Injectable({ providedIn: 'root' })
export class DataService {
  private url: string = 'assets/data/data.json';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(this.url);
  }
}

4. USE THE SERVICE

Create the component to use the service to fetch data from JSON file. You can use any type of HTML representation of the structure of JSON file you like.

- data.component.ts

Add standalone flag to the component and import CommonModule in the imports array, if you do not do this you'll get an error.

import { CommonModule } from '@angular/common';
import { DataService } from '../services/data.service';

@Component({
  selector: 'app-data',
  standalone: true,
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css'],
  imports: [CommonModule],
})

Inject the service into the constructor:
constructor(private dataService: DataService) {}

On component initialization subscribe to dataService method and fetch the data.

this.dataService.getData().subscribe((data) => {
        this.data = data;});

Now you can access all JSON data inside the component and display it the way you like.

I made a StackBlitz project for this post, but I decided to implement routing and an option for user to pick what data will be displayed and I used the same logic.

You can check the project here and I hope you will find it helpful: