How do I read a JSON file in Angular?

Question

I am trying to load a JSON file from local disk and use the data from it to fill a FabricJS canvas. I have problems on getting the data from the file.

This is what i have till now.

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

Any thoughts on how I can make this work?

why just dont use a service wich load with an $http the json file. — Jesus Carrasco, Sep 03 '17 at 03:04
Possible duplicate of [AngularJS: factory $http.get JSON file](https://stackoverflow.com/questions/16930473/angularjs-factory-http-get-json-file) — user93, Sep 03 '17 at 07:39

score 0 · Answer 1 · answered Sep 03 '17 at 09:14

FileReader has an async api.

You must register a callback to the onload event to get the data.

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

How do I read a JSON file in Angular?

1 Answers1