Angular 2 - wie man eine lokale Variable mit JSON-Daten aus einer externen Datei füllt

Die Angular 2-Tutorials Ich habe Place-Variablen direkt in der app.component.ts-Datei gelesen. Zum Beispiel var BAR unten, die Daten über die {Foo} Schnittstelle zieht.Angular 2 - wie man eine lokale Variable mit JSON-Daten aus einer externen Datei füllt

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

@Component({ 
    etc. 
}); 

export class AppComponent { 
    bar = BAR; 
} 

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

Allerdings habe ich die Daten für BAR in einer lokalen JSON-Datei. Ich glaube nicht, dass {HTTP_PROVIDER} notwendig ist. Wie würde ich die JSON-Daten aus der externen Datei abrufen?

Quelle

2016-03-21 ebakunin

HTTP_PROVIDER wird benötigt, wenn Sie eine Datei mit http laden möchten.

Hier ist ein Beispiel dafür, wie eine lokale JSON-Datei über HTTP zu laden:

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

Weitere Details hier: http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

Quelle

2016-03-22 01:15:26 TGH

Die Frage war: Wie machen wir das, OHNE http zu verwenden? – Feroz

Juste Ihre .json Datei in Ihrem statischen Ordner speichern (/ assets, wenn Sie benutzen den eckigen cli) und es sollte funktionieren.

Quelle

2017-01-14 20:32:35

Wie meinst du Arbeit? Wird es irgendwie in den Scope geladen? – cwj

Danke .. Dies funktioniert .. Wenn Sie dies tun, achten Sie darauf, den Ordner Assets in Ihrer URL verweisen. Beispiel: fetch ("assets/data.json"). dann (...) –

Benötigen Sie mehr Erklärung für Ihre Lösung –

Sie können die Http Anbieter in angular2

Stellen Sie sicher, Ihre lokale JSON-Datei im www Ordner.

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

Dies gibt Ihnen die lokale JSON-Datei zurück.

Quelle

2017-01-19 04:18:25

Dies ist tatsächlich eine Observable und nicht die Daten als Objekt –

Erstellen Sie eine Datei mit diesem Inhalt

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

speichern Sie es als BarConfig.ts oder einige wie

später verwenden als

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

oder noch besser folgt, verwenden BAR direkt dort, wo Sie gebraucht haben

Quelle

2017-03-08 23:11:48

Er fragt für den Import von JSON-Daten aus der lokalen Datei und nicht eine Klasse. –

@FlorianLeitgeb Ist keine [Klasse] (https://www.typescriptlang.org/docs/handbook/classes.html) es ist eine Deklaration, die exportiert wird [(Siehe Export)] (https://www.typescriptlang.org/ docs/handbook/modules.html) in diesem Fall eine Konstante (von [hier] (https://www.typescriptlang.org/docs/handbook/variable-declarations.html) bis [hier] (https: // developer. mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)). Sie können eine Variable stattdessen konstant verwenden, wenn Sie möchten. –

@WilliamArdila Ich habe es so versucht und es funktioniert. Ist das eine gute Möglichkeit, globale Konfigurationen zu verwenden? (zB: halte den Pfad des Image-Ordners konstant und benutze ihn überall) –

Beste Option ist, JSON-Datei zu erstellen und JSON-Details in Datei zu speichern, und rufen Sie diese Datei wie folgt auf.

Wenn Sie Winkel-cli mit Halten innerhalb Assets Ordner (parallel zur App dir) Verzeichnis

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); 
}

Hinweis die JSON-Datei: hier nur Sie Pfad geben müssen innerhalb Vermögenswerte wie Vermögenswerte Ordner/json/oldjson. json dann müssen Sie Pfad wie /json/oldjson.json schreiben

Wenn Sie Webpack verwenden, dann müssen Sie über die gleiche Struktur innerhalb Öffentlichen Ordner ähnlich wie Assets Ordner folgen.

Quelle

2017-07-09 06:36:44

Angular 2 - wie man eine lokale Variable mit JSON-Daten aus einer externen Datei füllt

Antwort

Verwandte Themen