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

L'angle de 2 tutoriels que j'ai lu lieu les variables directement dans l'application.composante.fichier ts. Par exemple var BAR ci-dessous, qui extrait des données à travers 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 de BAR dans un fichier JSON. Je ne crois pas {HTTP_PROVIDER} est nécessaire. Comment puis-je obtenir les données JSON à partir du fichier externe?

InformationsquelleAutor ebakunin | 2016-03-21
  1. 12

    Créer un fichier avec le contenu

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

    de l'enregistrer comme BarConfig.ts ou certains l'aiment

    à utiliser plus tard comme suit

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

    ou mieux encore, utiliser BAR directement là où vous avez besoin

    • Il demande pour l'importation de données json partir d'un fichier local, et non une classe.
    • N'est pas une class c'est une déclaration d'exportation (Voir à l'Exportation) dans ce cas, une constante (à partir de ici ici). Vous pouvez utiliser une variable au lieu de la constante si vous le souhaitez.
    • J'ai essayé de cette façon et ça fonctionne. Alors, est-ce une bonne façon d'utiliser des configurations globales? (par exemple: garder l'image de chemin d'accès au dossier d'une constante et d'utiliser partout )
    • cela devrait être accepté rép, a fonctionné pour moi, merci
    • Peu hors-sujet: à Propos des configurations voir ceci
    InformationsquelleAutor William Ardila
  2. 5

    HTTP_PROVIDER est nécessaire si vous voulez charger un fichier en utilisant le protocole http.

    Voici un exemple de comment charger un local fichier json sur 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

    • La question est : Comment pouvons-nous le faire SANS l'aide de http?
    InformationsquelleAutor TGH
  3. 4

    Juste de mettre votre .fichier json dans votre statique dossier (/actifs si vous utilisez l'angle de la cli) et cela devrait fonctionner.

    • Comment entendez-vous travailler? S'il s'en chargé dans le champ d'application d'une certaine manière?
    • Merci.. Cela fonctionne.. Quand vous faites cela, assurez-vous de référence du dossier des actifs dans votre url. e.g: fetch("assets/données.json").alors, (...)
    • Besoin de plus d'explication pour votre solution
    InformationsquelleAutor Nacim Idjakirene
  4. 3

    Meilleure option est de créer des fichier json et magasin json détails à l'intérieur de fichier et l'appel de ce fichier en utilisant comme ci-dessous.

    Si vous utilisez angulaires-cli Garder le fichier json à l'intérieur du dossier des Actifs (en parallèle à l'application dir) répertoire

    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, vous avez seulement besoin de donner le chemin d'accès à l'intérieur du dossier des actifs comme des actifs/json/oldjson.json ensuite, vous devez écrire le chemin d'accès comme /json/oldjson.json

    Si vous utilisez webpack vous devez suivre au-dessus même de la structure à l'intérieur du dossier public de ses semblables comme des actifs dossier.

    InformationsquelleAutor Vijay Gajera
  5. 1

    Vous pouvez utiliser le Http fournisseur de angular2

    Assurez-vous que vous place de votre région fichier json dans le dossier www.

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

    Revenir les locaux du fichier JSON.

    • C'est en fait le retour d'un Observables et non pas les données comme objet
    InformationsquelleAutor Deepu Varghese