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.
Error: TypeError: Cannot read property map of undefined at resolveDependencies (C:\xampp\htdocs\reactnative\reactnativerealm\drug\node_modules\metro\src\DeltaBundler\traverseDependencies.js
How to get data in DESC order Realm React Native
How to integrate Binect APIs in php
How to delete table in Laravel?