3 Methods for Reading Local JSON Files in Angular 7/8

  • Author: Ahmed Bouchefra

In this tutorial, we'll present you with 3 ways to read local JSON files in your Angular 8 application with examples:

  • Reading Local JSON Files Using TypeScript 2.9+ import Statement,
  • Reading Local JSON Files Using Angular HttpClient,
  • Reading Local JSON Files in Offline Angular Apps Using ES6+ import Statement

Let's see these methods by example.

Method 1: Reading Local JSON Files Using TypeScript 2.9+ import Statement

Angular 6.1+ supports TypeScript 2.9 which allows you to use the import statement to import local JSON files just like any TypeScript module. To enable this feature, you need to add and set the resolveJsonModule option to true in the tsconfig.json file under the compilerOptions key file. This is an example:

import { Component, OnInit } from '@angular/core';
import * as data from './data.json';

@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let product of products">

      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';

  products: any = (data as any).default;

  constructor(){}
  ngOnInit(){
    console.log(data);
  }
}

We use the ngOnInit() life-cycle method of Angular OnInit interface to display the imported JSON file in the console.

This is a screenshot of the imported JSON file in the console:

Import JSON in Angular and TypeScript

This assumes, you have a data.json file in the src/app folder of your project with the following values:

[
    {
        "id": 1,
        "name": "Licensed Frozen Hat",
        "description": "Incidunt et magni est ut.",
        "price": "170.00",
        "imageUrl": "https://source.unsplash.com/1600x900/?product",
        "quantity": 56840
    },
    {
        "id": 2,
        "name": "Rustic Concrete Chicken",
        "description": "Sint libero mollitia.",
        "price": "302.00",
        "imageUrl": "https://source.unsplash.com/1600x900/?product",
        "quantity": 9358
    },
    {
        "id": 3,
        "name": "Fantastic Metal Computer",
        "description": "In consequuntur cupiditate et unde minus.",
        "price": "279.00",
        "imageUrl": "https://source.unsplash.com/1600x900/?product",
        "quantity": 90316
    }
]

Please note that this supported only in Angular 6.1+ versions.

Method 2: Reading Local JSON Files Using Angular HttpClient

The second method that you can use to import JSON files in your Angular application is Angular HttpClient. Let's see this by example.

First, you need to import HttpClientModule in your app. Open the src/app/app.module.ts file and update it as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next, move the previous src/app/data.json file to the src/assets folder.

Next, open the src/app/app.component.ts file, import and inject HttpClient as follows:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";


@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let product of products">

      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';
  products: any = [];

  constructor(private httpClient: HttpClient){}
  ngOnInit(){
    this.httpClient.get("assets/data.json").subscribe(data =>{
      console.log(data);
      this.products = data;
    })
  }
}

Method 3: Reading Local JSON Files in Offline Angular Apps Using ES6+ import Statement

If your Angular application goes offline, reading the JSON file with HttpClient will fail. In this case, we have one more method to import local JSON files using the ES6+ import statement which supports importing JSON files.

But first we need to add a typing file as follows:

declare module "*.json" {
  const value: any;
  export default value;
}

Add this inside a new file json-typings.d.ts file in the src/app folder.

Now, you can import JSON files just like TypeScript 2.9+.

import * as data from "data.json";

Conclusion

In this article, we've seen three methods for importing and reading local JSON files in Angular 8 and TypeScript.

Sponsored Links