web-dev-qa-db-fra.com

Angular 5 Service pour lire le fichier .json local

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

Ce que je veux faire est de 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 obtenir cela fini?

javascriptjsonangular
43
pedromartinez

Tout d'abord, vous devez injecter HttpClient et non HttpClientModule, Deuxième chose que vous devez supprimer .map((res:any) => res.json()), vous n'en aurez plus besoin car la nouvelle HttpClient vous donnera le corps de la réponse par défaut, puis assurez-vous d'importer HttpClientModule dans votre AppModule :

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

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

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

pour ajouter ceci à 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)
        });
   }
}
76
Bougarfaoui El houcine

Vous avez une solution alternative, en important directement votre 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)
16
Nicolas Law-Dune

J'ai trouvé cette question lorsque je cherchais un moyen de vraiment lire un fichier local au lieu de lire un fichier depuis le serveur Web, ce que je préférerais appeler un "fichier distant".

Il suffit d'appeler 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 composant en remplaçant la propriété templateUrl par template et la valeur par un appel require à 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"],
  ...
},
...
7
fishbone
import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

Voir cet article pour plus de détails .

2
Ole

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

Dans tsconfig.app.json:

ajouter "resolveJsonModule": true dans "compilerOptions"

Dans un service ou un composant:

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

Et alors

private example = exampleData;
1
jaycer

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 certaines données de menu. Nous allons dans le fichier de composant d'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>
0
Surya R Praveen

Essaye ça

Écrivez le 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));
}

En composant

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