Wie lese ich eine JSON-Datei in Angular?

Question

Ich versuche, eine JSON-Datei von der lokalen Festplatte zu laden und die Daten zu verwenden, um eine FabricJS-Zeichenfläche zu füllen. Ich habe Probleme beim Abrufen der Daten aus der Datei.

Das habe ich bis jetzt.

app.html

<input type="file" accept=".json" id="fileInput" (change)="loadFile($event)"/> 

app.ts

loadFile(event) { 
const eventObj: MSInputMethodContext = <MSInputMethodContext> event; 
const target: HTMLInputElement = <HTMLInputElement> eventObj.target; 
const files: FileList = target.files; 
this.file = files[0]; 

const reader = new FileReader(); 
reader.readAsText(this.file, 'utf8'); 

this.canvas.loadFromJSON(this.file, this.canvas.renderAll.bind(this.canvas), function (o, object) { 
    console.log(o, object); 
}); 

Irgendwelche Gedanken darüber, wie ich diese Arbeit machen kann?

Answer 1

FileReader hat eine asynchrone API.

Sie müssen einen Rückruf für das Onload-Ereignis registrieren, um die Daten abzurufen.

loadFile(event) { 
const eventObj: MSInputMethodContext = <MSInputMethodContext> event; 
const target: HTMLInputElement = <HTMLInputElement> eventObj.target; 
const files: FileList = target.files; 
this.file = files[0]; 

const reader = new FileReader(); 
reader.readAsText(this.file, 'utf8'); 
reader.onload = function() { 
    this.canvas.loadFromJSON(reader.result, this.canvas.renderAll.bind(this.canvas), function (o, object) { 
    console.log(o, object); 
}); 
}