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?