Comment lire les fichiers JSON local dans Angular

Nous pouvons importer ou lire des fichiers JSON local dans Angular, de plusieurs façons différentes selon la version Angular que nous utilisons.

Dans cet article, vous apprendrez différentes méthodes pour lire les fichiers JSON en Angular avec des exemples.

Lecture des fichiers JSON local dans Angular 7 et Angular 6.1

Le framework Angular supporte TypeScript 2.9 à partir de la version 6.1.

Dans typescript 2.9 avec l’aide de resolveJsonModule nous pouvons importer des fichiers JSON locaux comme des modules

J’ai ajouté un exemple de fichier JSON dans le dossier assets de Angular App.

Jetez un coup d’oeil à l’échantillon json

{
"Post": "Angular Json Files",
"CanEdit": true,
"Version": 7
}

J’ai importé sampleJson.json dans notre composant ReadingJsonFiles Component comme indiqué ci-dessous

import { Component, OnInit } from '@angular/core';
import SampleJson from '../../assets/SampleJson.json';

@Component({
  selector: 'app-reading-json-files',
  templateUrl: './reading-json-files.component.html',
  styleUrls: ['./reading-json-files.component.css']
})

export class ReadingJsonFilesComponent implements OnInit {

constructor() {
 console.log('Reading local json files');
 console.log(SampleJson);
}

ngOnInit() {}

}

Maintenant, si vous compilez l’application, vous obtiendrez l’erreur suivante.

Pour supprimer l’erreur ci-dessus, dans le fichier tsconfig.json sous les options du compilateur, nous devons ajouter les configurations “resolveJsonModule” et “esModuleInterop” comme indiqué ci-dessous.

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

Une autre chose que vous devez comprendre est que le contenu du fichier JSON importé est typesafe.

Dans le json ci-dessus, version est un nombre. Ainsi, si vous affectez la version à une chaîne de caractères, une erreur sera générée.

SampleJson.Version= "Seven"; //throws error as Version is of type number

Lecture des fichiers JSON local dans Angular 5 ou Angular 4

Dans les versions antérieures de Angular comme Angular 5 ou Angular 4 pour lire les fichiers json locaux, nous avons besoin d’utiliser HttpClient depuis ‘@angular/common/http’ et Observable depuis ‘rxjs/Observable’ comme indiqué ci-dessous.

Nous devons injecter HttpClient dans le constructor.

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

@Component({
 selector: 'app-reading',
 templateUrl: './reading.component.html',
 styleUrls: ['./reading.component.css']
})

export class ReadingComponent implements OnInit {
 private _jsonURL = 'assets/SampleJson.json';
 constructor(private http: HttpClient) {
   this.getJSON().subscribe(data => {
    console.log(data);
   });
 }
 public getJSON(): Observable<any> {
   return this.http.get(this._jsonURL);
 }
 ngOnInit() {
 }
}

HttpClient est introduit dans Angular 4.3, Si vous utilisez Angular version 4.3 ci-dessous utilisez la méthode ci-dessous pour lire les fichiers JSON

Lecture des fichiers JSON local dans les versions Angular 2+.

Nous avons besoin d’utiliser Http depuis “@angular/http” pour importer les fichiers JSON dans Angular version 4.3 ci-dessous et Angular 2 + applications.

import { Component, Input } from '@angular/core';
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class ReadingJsonService{

private _jsonURL = 'assets/SampleJson.json';

constructor(private http: Http) {
 var object;
 this.getJSON().subscribe(data => object=data, error => console.log(error));
}

public getJSON(): Observable<any> {
  return this.http.get(_jsonURL)
   .map((response:any) => response.json())
   .catch((error:any) => console.log(error));

}
}

Lecture des fichiers JSON local dans les applications angulaires hors ligne

Angular Http ne fonctionnera pas si l’application est hors ligne.

Dans ce cas, nous avons un autre moyen d’importer les fichiers JSON.

Nous devons ajouter un nouveau fichier json-typings.d.ts dans le dossier app.

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

Et puis nous pouvons importer des fichiers JSON tout comme les dernières versions d’Angular

import * as SampleJson from "../../assets/SampleJson.json";