web-dev-qa-db-fra.com

Angular 2 - comment remplir une variable locale avec des données JSON à partir d'un fichier externe

Les Angular 2 tutoriels que j'ai lus placent les variables directement dans le fichier app.component.ts. Par exemple var BAR ci-dessous, qui extrait les données via le {Foo} interface.

import {Component} from 'angular2/core';
import {Foo} from './foo';

@Component({
   etc.
});

export class AppComponent {
   bar = BAR;
}

var BAR: Foo[] = [
   { 'id': 1 },
   { 'id': 2 }
];

Cependant, j'ai les données pour BAR dans un fichier JSON local. Je ne pense pas que {HTTP_PROVIDER} soit nécessaire. Comment pourrais-je obtenir les données JSON à partir du fichier externe?

jsonangular
22
ebakunin

Créer un fichier avec ce contenu

export const BAR= [ { 'id': 1 }, { 'id': 2 } ];

enregistrez-le sous BarConfig.ts ou quelque chose comme

l'utiliser plus tard comme suit

import { BAR } from './BarConfig'; let bar= BAR;

ou encore mieux, utilisez BAR directement où vous en avez besoin

12
William Ardila

HTTP_PROVIDER est nécessaire si vous souhaitez charger un fichier à l'aide de http.

Voici un exemple de chargement d'un fichier json local via http:

this.result = {friends:[]};
this.http.get('./friends.json').map((res: Response) => res.json()).subscribe(res => this.result = res);

Plus de détails ici: http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

5
TGH

Mettez simplement votre fichier .json dans votre dossier statique (/ assets si vous utilisez le angular cli) et cela devrait fonctionner.

4
Nacim Idjakirene

La meilleure option est de créer un fichier json et de stocker les détails json dans le fichier et d'appeler ce fichier en utilisant comme ci-dessous.

Si vous utilisez angular-cli Conservez le fichier json dans le dossier Assets (parallèle au répertoire app)

return this.http.get('<json file path inside assets folder>.json'))
    .map((response: Response) => {
        console.log("mock data" + response.json());
        return response.json();
    }
    )
    .catch(this.handleError);
}

Remarque: ici, il vous suffit de donner un chemin dans le dossier des actifs comme assets/json/oldjson.json, puis vous devez écrire un chemin comme /json/oldjson.json

Si vous utilisez Webpack, vous devez suivre la même structure dans le dossier public ci-dessus, son dossier d'actifs similaire.

3
Vijay Gajera

Vous pouvez utiliser le fournisseur Http dans angular2

Assurez-vous que vous placez votre fichier json local dans le dossier www.

getLocalFile(){
    return this.http.get('./localFileName.json').
        map(res => res.json());
}

Cela vous renverra le fichier JSON local.

1
Deepu Varghese