web-dev-qa-db-fra.com

Angular 4: comment accéder au json local?

Dans Angular2, vous pouvez avoir un dossier/data/et un fichier json et vous pouvez y accéder à l’emplacement localhost: 4200/data/quelqu’un.

Ce n'est plus possible dans Angular4. 

Une idée comment le faire fonctionner?

javascriptjsonangular
15
Dan Neciu

vous pouvez utiliser ce code

@Injectable()
export class AppServices{

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

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

     }
}

ici, file.json est votre fichier json local.

voir ici aussi

voir aussi le changlog de angular-cli pour path 

11
Pardeep Jain

Bien sûr, c'est possible. Supposons que voici votre fichier JSON

 enter image description here


Et voici votre code pour appeler le json 

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

@Injectable()
export class YourService {

   constructor(private http: Http) { }

   getAdvantageData(){
      let apiUrl = './assets/data/api/advantage.json';
      return this.http.get(apiUrl)
      .map( (response: Response) => {
         const data = response.json();
         return data;
      });
   }  
}
9
Vivek Shukla

J'étais confronté au même problème, où mon service Observable Angular se situait dans le dossier «src/app /» et tentait de charger un fichier JSON local. J'ai essayé de mettre le fichier JSON dans le même dossier d'application, dans un nouveau dossier 'api', utilisé différents types d'itinéraires apparentés/absolus, mais cela n'a pas aidé et j'ai obtenu l'erreur 404. Au moment où je le mets dans le dossier "assets" ... BAM !!! ça a marché. Je suppose qu'il y a plus que ça ...

Peut-être que ce lien aide ...

CHEMINS RELATIFS AUX COMPOSANTS EN ANGULAIRE

7
Deepak Pathak

Vous pouvez aussi utiliser "require";

let test = require('./test.json');
7
yazantahhan

Sur la base de ce post , voici la réponse complète pour Angular 6+:

De angular-cli doc , json peut être considéré comme un actif et accessible depuis une importation standard sans utiliser de requête ajax.

Supposons que vous ajoutiez vos fichiers JSON dans le répertoire "your-json-dir":

  1. ajoutez "your-json-dir" dans le fichier angular.json (:

    "assets": [ "src/assets", "src/your-json-dir" ]

  2. autorise l'importation de modules JSON dans le fichier typings.d.ts pour éviter les erreurs TypeScript:

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

  3. dans votre fichier contrôleur/service/autre chose, importez simplement le fichier en utilisant ce chemin relatif:

    import * as myJson from 'your-json-dir/your-json-file.json';

3
Benjamin Caure

Vous pouvez ajouter l’emplacement de votre dossier sous la balise Assets dans angular.json.

"assets": [
          "src/favicon.ico",
          "src/assets",
          "src/api"
        ],
0
deathrace

Je l'ai compris.

Dans Angular2, j'avais le dossier sous le dossier src . Dans Angular4, vous devez l'avoir dans le dossier racine.

Exemple:

Angular2: 

root/src/data/file.json

Angular4:

root/data/file.json

0
Dan Neciu