How to import json file in Angular (2024)

Hello Everyone!!! In this post, we will learn how to read json file in angular. We will cover 3 different ways to import and read local json file.

We will get below output at the end of every method of reading json file.

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.

So we can use this below feature in any Angular application which has used TypeScript 2.9+. To enable this feature, follow the below steps.

Step 1 :

Create your JSON file in your project wherever you want.

We will create a new folder called json and under that folder, create a new file called data.json. So it’s path looks like src/assets/json/data.json.

Step 2 :

Set the resolveJsonModule: true & esModuleInterop: true in the tsconfig.json file under the compilerOptions key.

So tsconfig.json will look like

{
 ...,
 "compilerOptions": {
 ...,
 "resolveJsonModule": true,
 "esModuleInterop": true
 }
}

Where

• --resolveJsonModule allows for importing, extracting types from .json files.
• --esModuleInterop allows default imports from modules with no default export. This is required since a .json file has no default output.

Step 3 :

Now you can import JSON file in your components/directives/services wherever you want with

// PATH TO YOUR JSON FILE
import data from '../../assets/json/data.json';

The second way that you can use to import JSON files in your Angular application is Angular HttpClient.

Step 1 :

Create your JSON file in your project wherever you want.

We will create a new folder called json and under that folder, create a new file called data.json. So it’s path looks like src/assets/json/data.json.

Step 2 :

Import HttpClientModule in app.module.ts file. So it’s code looks like

import { HttpClientModule } from '@angular/common/http';@NgModule({
 imports: [..., HttpClientModule]
})
export class AppModule {}

Step 3 :

Now you can import JSON file in your components/directives/services with making Http call like

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';@Component({
 selector: 'app-second-way',
 template: `<div>{{jsonDataResult | json}}`
})
export class SecondWayComponent {
 jsonDataResult: any;
 constructor(private http: HttpClient) {
 this.http.get('assets/json/data.json').subscribe((res) => {
 this.jsonDataResult = res;
 console.log('--- result :: ', this.jsonDataResult);
 });
 }
}

We have one more way to import local JSON files using the ES6+ import statement which supports importing JSON files.

Step 1 :

Create your JSON file in your project wherever you want.

We will create a new folder called json and under that folder, create a new file called data.json. So it’s path looks like src/assets/json/data.json.

Step 2 :

Create a typing file *.d.ts where your JSON file created.

In our case, we will create data-typings.d.ts under src/assets/json folder. So it’s path looks like src/assets/json/data-typings.d.ts. It’s code looks like

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

Step 3 :

Now you can import JSON file in your components/directives/services wherever you want with

// PATH TO YOUR JSON FILE
import * as data from '../../assets/json/data.json';
// OR Import it like
// import data from '../../assets/json/data.json';

Below is our GitHub repository link where you can download this working example.

Thanks!!! Did you find your solution or learn something new? If so please:

• clap 👏 button below️ as many times as you can and share this post with others.
• Follow us on Medium to read more articles about Python, Angular, React, Vue, Node JS.
• You can leave your feedback/suggestions in the comments 💬 below.

Would you like to check out our other articles?