Revision history [back]

The procedure to extract information from a JSON file stored locally in an Angular Ionic application is as follows:

1. Create a new service named "JsonService" using the following command:

ionic g service json

1. Open the "json.service.ts" file and import the HttpClient module.

import { HttpClient } from '@angular/common/http';

1. Add the following code to the constructor of the "JsonService" class to inject the HttpClient module.

constructor(private http: HttpClient) { }

1. Create a new method named "getJsonData" in the "JsonService" class to fetch the JSON data from the local file.

getJsonData() { return this.http.get('assets/data/json-data.json'); }

1. Open the component where you want to use the JSON data and inject the "JsonService" using the following code:

constructor(private jsonService: JsonService) { }

1. Call the "getJsonData" method of the "JsonService" using the following code to get the JSON data.

this.jsonService.getJsonData().subscribe((data) => { console.log(data); });

1. You can access the JSON data returned by the "getJsonData" method using the "data" variable in the above code.