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

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

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);
  }
}

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

This assumes, you have a data.json file in 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 reading local JSON files in Angular 8 and TypeScript.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

« Angular 7/8 HttpClient Interceptors: Mocking HTTP Requests Example Angular 7/8 SEO: Rendering Your App on Server-side with Angular Universal »

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


RELATED TUTORIALS

Angular 9 Tutorial and Example: Build your First Angular App
Angular 9/8 Ajax Get and Post Requests Example
Angular 9/8 Tutorial By Example: (REST API, HttpClient GET, Components, Services & ngFor)
How to Post FormData (multipart/form-data) with Angular 9/8, TypeScript and HttpClient
Angular 9/8 Material Data-Table Tutorial & Example
Angular 9/8 Popup Modal Example with Angular Material Form and Modal Dialog Components
Angular 9/8 Material Examples: Date Picker, Input, CheckBox, Radio Button and Select

Get our books

Read our other tutorials

comments powered by Disqus
DMCA.com Protection Status