web-dev-qa-db-fra.com

Obtenir JSON à partir du fichier texte

J'ai ce code à mon service

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
import {Client} from "../clients/client";
import {Observable} from "rxjs/Observable";


@Injectable()
export class ClientsService {


  private clientUrl = './client.json';

  private headers = new Headers({ 'Accept': 'application/json' });
  private options = new RequestOptions({ headers: this.headers });

  private client : Client;

  constructor(private http:Http) {}

  getClient() : Observable<any>{
    return this.http.get(this.clientUrl, this.options)
      .map(res => res);
  }
}

et dans mon composant je l'appelle:

this.client = this.clientsService.getClient()
  .subscribe(data => {
    console.log(data);
  });

Mais je reçois une erreur 404

 enter image description here

Mais j'ai ce fichier json dans le même dossier que mon service.

 enter image description here

Qu'est-ce qui ne va pas? 

jsonangulartypescript
4
gsiradze

Vous devez donner le chemin absolu à partir de votre chemin de base. J'aime, path/to/Services/client.json

Voici un exemple: https://plnkr.co/edit/60E2qb9gOjvkEAeR5CtE?p=preview

1
eko

Si vous utilisez angular-cli Conservez le fichier json dans le répertoire Assets (parallèle au répertoire de l'application).

Dans votre cas, vous devez créer un fichier comme assets/client.json.

return this.http.get('/client.json'))
    .map((response: Response) => {
        console.log("mock data" + response.json());
        return response.json();
    }
    )
    .catch(this.handleError);
}

Remarque: ici, vous devez uniquement indiquer le chemin dans le dossier des actifs, tel que assets/client.json, puis vous devez écrire le chemin, tel que /client.json.

Si vous utilisez webpack, vous devez suivre la même structure que celle du dossier public, similaire à celle du dossier assets.

0
Vijay Gajera

S'il vous plaît ajouter ce code dans le fichier typings.d.ts 

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

et simplement importer en utilisant import * as data1 from 'path.json';

0
Nitin Wahale