web-dev-qa-db-fra.com

Angular 6 - Charger JSON à partir de local

J'essaie de charger un fichier JSON local de deux manières.

Ceci est mon fichier json:

{
  "imgsesion": "fa_closesesion.png",
  "texthome": "volver a la home",
  "logo": "fa_logo.png",
  "menu": {
    "background": "orange",
    "link1": "ESCRITOR",
    "link2": "MÚSICO",
    "link3": "AYUDA ADMIN",
    "submenu": {
      "link1": {
        "text1": "novelas",
        "text2": "obras de teatro"
      },
      "link2": {
        "text1": "compositor",
        "text2": "intérprete"
      }
    }
  }
}
  • Voie 1: Utiliser Http

Ceci est mon fichier de service (general.service.ts)

  getContentJSON() {
    return this.http.get('assets/json/general.json')
    .map(response => response.json());
  }

De cette façon, cela fonctionne bien, mais affiche la prochaine erreur dans la console du navigateur Web:

ERROR TypeError: Cannot read property 'menu' of undefined
  • Voie 2: Utiliser HttpClient

Ceci est mon fichier de service (general.service.ts)

  getContentJSON() {
    return this.httpClient.get("assets/json/general.json");
  }

Cela ne fonctionne pas car je ne trouve pas le fichier general.json, cela passe par le contrôle de l'erreur et cela me donne une erreur 404

Ceci est le fichier de composant (app.component.ts)

export class AppComponent implements OnInit {
  contentGeneral: any;

ngOnInit() {
this.getContentJSON();
}

  getContentJSON() {
    this.generalService.getContentJSON().subscribe(data => {
      this.contentGeneral = data;
    }, // Bind to view
    err => {
      // Log errors if any
      console.log('error: ', err);
    });
  }

}

Ceci est le fichier modèle (app.component.html):

<a href="#" routerLink="/home" class="linkHome">{{contentGeneral.texthome}}</a>

<div class="submenu" *ngIf="linkWrite.isActive || isSubMenuWriter">
    <span class="d-block text-right small">{{contentGeneral.menu.submenu.link1.text1}}</span>
    <span class="d-block text-right small">{{contentGeneral.menu.submenu.link1.text2}}</span>
</div>

Ceci est mon erreur réelle:

Dans app.component.ts, j'ajoute l'import:

import * as data_json from './assets/json/general.json';

Mais quand je lance ng serve, il me donne l’erreur suivante:

 enter image description here

Comment je pourrais le résoudre?

jsonangular
3
Eladerezador

La solution la plus simple: 

import "myJSON" from "./myJson"

Mise à jour importante!

J'ai trouvé que cette méthode cessait de fonctionner dans les dernières versions angulaires, à cause de l'erreur suivante:

ERREUR dans src/app/app.weather.service.ts (2,25): erreur TS2732: impossible de trouver le module './data.json'. Envisagez d'utiliser le module toimport '--resolveJsonModule' avec l'extension '.json'.

Pour que cela fonctionne, accédez au fichier tsconfig.json et aux deux autres, dans compilerOptions:

"resolveJsonModule": true,
"esModuleInterop": true,

Si vous n'utilisez que la première option, vous pouvez obtenir une erreur comme ceci:

ERREUR dans src/app/app.weather.service.ts (2,8): erreur TS1192: le module '".... app/data/data.json"' n'a aucune exportation par défaut.

(J'ai trouvé cette très bonne réponse ici ( https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/ ))

10
Kamil Naja

Par ce moyen...

import "file" from "./file.json"

J'ai une ligne rouge et une erreur comme un module non trouvé par angular. 

Après un peu de RND, j'ai eu un autre moyen qui fonctionne pour moi. J'espère que cela peut aider quelqu'un. 

var data = require('src/file.json');
console.log("Json data : ", JSON.stringify(data));
5
Sachin Shah

Voir cet article :

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

Ceci est dû au fait que vous demandez un fichier JSON de manière asynchrone. Vous pouvez le gérer avec un opérateur de navigation sécurisé ou en utilisant ngIf.

<div class="submenu" *ngIf="linkWrite.isActive || isSubMenuWriter">
                  <span class="d-block text-right small">{{contentGeneral?.menu?.submenu?.link1?.text1}}</span>
                  <span class="d-block text-right small">{{contentGeneral?.menu?.submenu?.link1?.text2}}</span>
                </div>

ou importez simplement le fichier JSON dans votre composant et affectez sampleJSON.

import "sampleJSON" from "./sampleJSON"
0
Sajeetharan

vous pouvez utiliser l'extrait de code suivant:

declare const require;
const locale = localStorage.getItem('locale');
require(`./file.${locale}.json`)
0
tair yassine