Read an External JSON file in Angular 8

We can use the HttpClient service in Angular 8 to read and extract data from an external JSON file. Using the Get() method of HttpClient class, we can easily open and read data from a JSON file. In this angular 8 tutorial, I will show you how to read JSON data from a file.

The JSON Data

Here is a sample data in JSON format. I have saved it in a file named port.json

[{
  "AEAJM": {
    "name": "Ajman",
    "city": "Ajman",
    "country": "United Arab Emirates",
    "alias": [],
    "regions": [],
    "coordinates": [
      55.5136433,
      25.4052165
    ],
    "province": "Ajman",
    "timezone": "Asia/Dubai",
    "unlocs": [
      "AEAJM"
    ],
    "code": "52000"
  },
  "AEAUH": {
    "name": "Abu Dhabi",
    "coordinates": [
      54.37,
      24.47
    ],
    "city": "Abu Dhabi",
    "province": "Abu Z¸aby [Abu Dhabi]",
    "country": "United Arab Emirates",
    "alias": [],
    "regions": [],
    "timezone": "Asia/Dubai",
    "unlocs": [
      "AEAUH"
    ],
    "code": "52001"
  }
  ]

Create the Angular 4 Project

Open cmd prompt and go to the folder where you want to create your project and Type below command:-

ng new readjsoninangular

Now import the http client module in your app.module.ts file.

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

Next create a angular 8 service

When we used HttpClient get() method directly in our component, it is against the separations of the coding rule and coding standard. To retain coding standard we used angular services. So let’s create a new service:-

$ ng generate service readjson

Now we have a file named readjson.service.ts in our application directory. First import HttpClient module in this file.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class ReadjsonService {
baseUrl:string = "JSON URL";
    constructor(private httpClient : HttpClient) {}
    get_jasondata(){
        return this.httpClient.get(this.baseUrl);
    }

Import HttpClient in your component

Next import HttpClient in your component and include HttpClient via the component’s constructor.

 import { HttpClient } from '@angular/common/http';
 constructor(private httpClient: HttpClient){}

Now make a function for httpclient get() method

For get() method, I have call the constructor function to read the json file. See below example.

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { ReadjsonService } from './readjson.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myapp';

       constructor(private readjsonService: ReadjsonService){
            this.readjsonService.get_jasondata().subscribe((res : any[])=>{

                console.log(res);
            });
}
}

You can check the console for the result.