Service Angular 5 pour lire le fichier .json local

J'utilise Angular 5 et j'ai créé un service en utilisant angular-cli

Ce que je veux faire, c'est créer un service qui lit un fichier json local pour Angular 5.

C'est ce que j'ai ... je suis un peu coincé ...

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class AppSettingsService {

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

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

Comment puis-je terminer cela?

Vous devez d'abord injecter HttpClientet non HttpClientModule, deuxième chose que vous devez supprimer .map((res:any) => res.json())vous n'en aurez plus besoin car le nouveau HttpClientvous donnera le corps de la réponse par défaut, enfin assurez-vous d'importer HttpClientModuledans votre AppModule :

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

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/mydata.json");
    }
}

pour l'ajouter à votre composant:

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}

Vous avez une solution alternative, importer directement votre fichier json.

Pour compiler, déclarez ce module dans votre fichier typings.d.ts

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

Dans votre code

import { data_json } from '../../path_of_your.json';

console.log(data_json)

Pour Angular 7, j'ai suivi ces étapes pour importer directement les données json:

Dans tsconfig.app.json:

ajouter "resolveJsonModule": true à"compilerOptions"

Dans un service ou un composant:

import * as exampleData from '../example.json';

Puis

private example = exampleData;

J'ai trouvé cette question en cherchant un moyen de vraiment lire un fichier local au lieu de lire un fichier depuis le serveur Web, que je préfère appeler un "fichier distant".

Appelez simplement require:

const content = require('../../path_of_your.json');

Le code source Angular-CLI m'a inspiré: j'ai découvert qu'ils incluent des modèles de composants en remplaçant la templateUrlpropriété par templateet la valeur par unrequire appel à la ressource HTML réelle.

Si vous utilisez le compilateur AOT, vous devez ajouter les définitions de type de nœud en ajustant tsconfig.app.json:

"compilerOptions": {
  "types": ["node"],
  ...
},
...

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

Consultez cet article pour plus de détails .

Essaye ça

Écrivez du code dans votre service

import {Observable, of} from 'rxjs';

importer un fichier json

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

Dans le composant

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}

Créons un fichier JSON, nous le nommons navbar.json, vous pouvez le nommer comme vous le souhaitez!

navbar.json

[
  {
    "href": "#",
    "text": "Home",
    "icon": ""
  },
  {
    "href": "#",
    "text": "Bundles",
    "icon": "",
    "children": [
      {
        "href": "#national",
        "text": "National",
        "icon": "assets/images/national.svg"
      }
    ]
  }
]

Nous avons maintenant créé un fichier JSON avec des données de menu. Nous allons aller au fichier du composant de l'application et coller le code ci-dessous.

app.component.ts

import { Component } from '@angular/core';
import menudata from './navbar.json';

@Component({
  selector: 'lm-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
    mainmenu:any = menudata;

}

Votre application Angular 7 est maintenant prête à servir les données du fichier JSON local.

Accédez à app.component.html et collez-y le code suivant.

app.component.html

<ul class="navbar-nav ml-auto">
                  <li class="nav-item" *ngFor="let menu of mainmenu">
                  <a class="nav-link" href="{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
                  <ul class="sub_menu" *ngIf="menu.children && menu.children.length > 0"> 
                            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" href="{{sub_menu.href}}"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li> 
                        </ul>
                  </li>
                  </ul>

En utilisant Typescript 3.6.3 et Angular 6, aucune de ces solutions n'a fonctionné pour moi.

Ce qui a fonctionné, c'est de suivre le tutoriel ici qui dit que vous devez ajouter un petit fichier appelé njson-typings.d.tsà votre projet, contenant ceci:

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

Une fois cela fait, je pourrais simplement importer mes données json codées en dur:

import employeeData from '../../assets/employees.json';

et utilisez-le dans mon composant:

export class FetchDataComponent implements OnInit {
  public employees: Employee[];

  constructor() {
    //  Load the data from a hardcoded .json file
    this.employees = employeeData;
    . . . .
  }